CSS CSS Transitions and Transforms Adding 3D Effects with CSS Build a Rotating 3D Cube

Franklin Gomez
Franklin Gomez
6,548 Points

Building A Rotating 3D cube

I followed and wrote down the exact code as the professor as he was show to build the cube, but the results were different. I try to look for misspells, but I found none and yet the result is a weird/half way/ cube. Can someone tell me what am I doing wrong please?

here is the HTML:

<!DOCTYPE html> <html> <head> <title>3D Transform Gallery</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/interactions.css"> </head> <body> <div class="container"> <header class="main-header clearfix"> <img class="logo" src="img/camera.svg"> <h1 class="name">3DTransform <span>Gallery</span></h1> </header>

    <div class="content clearfix">

        <div class="cube-container">
            <div class="photo-cube">

                <img class="front"src="img/photos/1.jpg" alt="">
                <div class="back photo-desc">
                  <h3>Earth from Space</h3>
                  <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
                    <a href="#" class="button">download</a>
                </div>
                <img class="left" src="img/photos/2.jpg" alt="">
                <img class="right" src="img/photos/3.jpg" alt="">

            </div>
        </div>  

        <div class="cube-container">
            <div class="photo-cube">

                <img class="front"src="img/photos/4.jpg" alt="">
                <div class="back photo-desc">
                  <h3>Space Images</h3>
                  <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
                    <a href="#" class="button">download</a>
                </div>
                <img class="left" src="img/photos/5.jpg" alt="">
                <img class="right" src="img/photos/6.jpg" alt="">

            </div>
        </div>  

        <div class="cube-container">
            <div class="photo-cube">

                <img class="front"src="img/photos/7.jpg" alt="">
                <div class="back photo-desc">
                  <h3>The Milky Way</h3>
                  <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
                    <a href="#" class="button">download</a>
                </div>
                <img class="left" src="img/photos/8.jpg" alt="">
                <img class="right" src="img/photos/9.jpg" alt="">

            </div>
        </div>  

    </div>
</div>

</body> </html>

here is the CSS for interactions:

/* ================================= Button Transitions ==================================== */

.button { transition: background .3s; } .button:hover { background: rgba(74,137,202, 1); }

/* ================================= Photo 3D Transforms & Transitions ==================================== */

.cube-container { box-shadow: 0 18px 40px 5px rgba(0,0,0,.4); perspective: 800px;

} .photo-cube { transition: transform 2s ease-in-out; width: 220px; height: 200px; transform-style: perspective-3d; }

.photo-cube:hover { transform: rotateY(-270deg); }

.front, .back, .left, .right { width: 100%; height: 100%; display: block; position: absolute; }

.front { transform: translateZ(110px); }

.back { transform: translateZ(-110px) rotateY(270deg); transform-origin: center left; }

.left { transform: rotateY(-270deg) translateX(110px); transform-orgin: top right; }

.right { transform: translateZ(-110px) rotateY(180deg); }

1 Answer

Steven Parker
Steven Parker
163,747 Points

It's most likely a typo.

It's too hard to read that unformatted code, but nearly every time someone has a problem with this project, there's a tiny little typo in there somewhere. Even a single character change can produce some really bizarre visual results.

You might try using the downloadable project files for comparison, that may be easier than using the video.


FYI: Code formatting instructions are in the Markdown Cheatsheet pop-up that can be found below the "Add an Answer" area. :arrow_heading_down: