Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Posted by Franklin Gomez
Franklin Gomez
6,549 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
231,268 Points
Steven Parker
Steven Parker
231,268 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: