Adding CSS shading effects to a 3D Menu. The content has disappeared after writing the whole thing. problem seems to start after writing the '.book .info' css which is marked

Question

0.00/5 (No votes)

See more:

INDEX.html

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>3D Shapes with Shadows</title>
        <link rel="stylesheet" type="text/css" href="css/styles.css" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div id="container">
            <div id="wrapper">
                <ul class="viewpoint">
                    <li class="shape">
                        <div class="book">
                            <div class="front">
                                <div class="info">
                                    <header>
                                        <h1>The Hidden Reality</h1>
                                        <span class="pub">Published</span>
                                        <span class="Year">2012</span>
                                    </header>
                                    <p>There was a time when 'universe' meant all there is. Everything. Yet, as physicist Briane Greene's extraordinary book shows, ours may be just one universe among many, like endless reflections in a mirror.</p>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="shape">
                        <div class="book">
                            <div class="front">
                                <div class="info">
                                    <header>
                                        <h1>Extra-Terrestrials Among Us</h1>
                                        <span class="pub">Published</span>
                                        <span class="Year">1986</span>
                                    </header>
                                    <p>A quick brown fox jumps over the lazy dog.</p>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="shape">
                        <div class="book">
                            <div class="front">
                                <div class="info">
                                    <header>
                                        <h1>God is an Astronaut</h1>
                                        <span class="pub">Published</span>
                                        <span class="Year">2014</span>
                                    </header>
                                    <p>A quick brown fox jumps over the lazy dog.</p>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </body>
</html>

STYLES.css

C#

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
    
}

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    background: #f1f1f1 url('../imgs/bg.jpg');
    font-family: Arial, Verdana;
    
}

#wrapper {
    margin: 0 auto 100px auto;
    max-width: 960px;
}

.viewpoint {
list-style: none;
padding: 0;

}

.shape {
    width: 260px;
    height: 400px;
    margin: 30px;
    float: left;
    -webkit-perspective: 1000px;
}

.book {
    width: 260px;
    height: 400px;
    transform-style: preserve-3d;
    transform: translateZ(-130px);
    transition: transform 320ms;
    cursor: pointer;
    
    
}

.book:hover {
    -webkit-transform: rotateY(-78deg) translateZ(20px);
    -moz-transform: rotateY(-78deg) translateZ(20px);
    transform: rotateY(-78deg) translateZ(20px);
}
.book .front,
.book .info {
    position: absolute;
    width: 260px;
    height: 400px;
    background-color:#fff;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    
}

.book .front {
    -webkit-transform: translateZ(130px);
    -moz-transform: translate(130px);
    transform: translateZ(130px);
    background-size: cover;
    background-repeat: no-repeat;
    
}
/*THIS PART*/
.book .info {
    -webkit-transform: rotateY(90deg) translateZ(130px);
    /-moz-transform: rotateY(90deg) translateZ(130px);
    transform: rotateY(90deg) translateZ(130px);
    border: 1px solid #B8B5B5;
    font-size: 0.75mm;
} /*THIS PART */

.book::after {
    content:'';
    width: 260px;
    height: 260px;
    position:absolute;
    bottom:0;
    box-shadow: 0 30px 50px rgba(0,0,0,0.9);
    transform-origin: 100% 100%;
    transform: rotateX(90deg) translateY(130px);
    transition: box-shadow 350ms;
    
}

book:hover::after {
    box-shadow: 50px -5px 50px rgba(0,0,0,0.4);
}

.info header {
    color: #FFF;
    padding: 7px 10px;
    font-weight: bold;
    height: 195px;
    background-repeat: no-repeat;
    text-shadow: 0px 1px 1px rgba(0,0,0,2);
    
}

.info header h1 {
    margin: 10px 0 0 3px;
    font-size: 1.3em;
    
}

.info header .Year {
    border: 1px solid #ddd;
    padding: 1px 3px;
}

.info p {
    padding: 1.2em 1.4em;
    margin: 2px 0 0;
    font-weight: 700;
    color:#666;
    line-height: 1.4em;
    border-top: 10px solid #555;
}

.book .front {
    box-shadow: insert 0px 0px 4px rgba(255,255,255,0);
    
}
.book:hover .front {
    box-shadow: insert 300px 0px 40px rgba(255,255,255,0.8);
}

.book .info,
.book .info header {
    box-shadow: insert -300px 0px 40px rgba(0,0,0,0.5);
}

.book:hover .info,
.book:hover .info header {
    box-shadow: inset 0px 0px 40px rgba(0,0,0,0);
    
}
.book .front,
.book .info,
.book .info header {
    -webkit-transition: box-shadow 350ms;
    -moz-transition: box-shadow 350ms;
    transition: box-shadow 350ms;
}

.shape:nth-child(1) .front {
    background-image: url('../imgs/book01.jpg');
    
}
.shape:nth-child(2) .front {
    background-image:url('../imgs/book02.jpg');
}

.shape:nth-child(3) .front {
    background-image: url('../imgs/book03.jpg');
}

.shape:nth-child(1) .info header {
    background-image: url('..imgs/innerImg01.jpg');
    
}

.shape:nth-child(2) .info header {
    background-image: url('../imgs/innerImg02.jpg');
    
}

.shape:nth-child(3) .info header {
    background-image: url('../imgs/innerImg03.jpg');
}

@media screen and (max-width: 480px){
    .shape {
        float:none;
        margin: 30px auto 60px;
    }
}

Posted 23-Nov-15 17:34pm

GeneralZod007

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Krunal Rohit · Answer 1 · 2015-11-23T17:58:00

Solution 1

Remove all the transitions from .book .info. As you have already given the transition on .book:hover, it'll do the job.

CSS

.book .info {
  /* -webkit-transform: rotateY(90deg) translateZ(130px);
    -moz-transform: rotateY(90deg) translateZ(130px);
    transform: rotateY(90deg) translateZ(130px); */
    border: 1px solid #B8B5B5;
}

Let me know if it doesn't work.:)

-KR

Posted 23-Nov-15 17:58pm

Krunal Rohit

v2

Comments

GeneralZod007 24-Nov-15 5:07am

So now the content is back. But the .shape .front Images have disappeared. and the inner images have come up(which were missing before), but they are completely zoomed in.