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 3D Transforms Challenge

Martin Park
Martin Park
12,792 Points
Posted by Martin Park
Martin Park
12,792 Points

Help with Rotate Challenge

Can't pass the 2nd step of this challenge:

"Next, target .photo. Use a 3D transform function to rotate .photo 30 degrees on the Y-axis only."

.wrapper { perspective: 600px; }

.photo { transform: rotate3D(0, 1, 0, 30deg); }

I have also tried:

.wrapper { perspective: 600px; }

.photo { transform: rotateY(30deg); }

Both cause me to fail the challenge. I'm sure I'm doing something obvious wrong but I cannot see it and don't want to waste any more time staring at the same code.

Please tell me what I'm doing wrong! lol

style.css 
/* Complete the challenge by writing CSS below */

.wrapper {
  perspective: 600px;
}

.photo {
  transform: rotateY(30deg);
}
index.html 
<!DOCTYPE html>
<html>
<head>
    <title>3D Transform Challenge</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="page.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="wrapper">
        <img class="photo" src="1.jpg" alt="Dazzling Auroras">
    </div>

</body>
</html>

1 Answer

Felix Yakubov
Felix Yakubov
17,475 Points
Felix Yakubov
Felix Yakubov
17,475 Points

Its okay, its not so easy to understand :) The answer can be found here https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate3d The code is:

.photo { transform: rotate3d(0,1,0,30deg); }

Martin Park
Martin Park
12,792 Points
Martin Park
Martin Park
12,792 Points

OMG! So it was because I had a capital "D" in "3D"??

So I was technically correct?

And also my "rotateY" option would have served the same purpose too?

Quite frustrating!

Thank you for the reply!

PS - If any mods are reading this perhaps the challenge could be updated? Getting stuck at something like this can be infuriating :)

Felix Yakubov
Felix Yakubov
17,475 Points
Felix Yakubov
Felix Yakubov
17,475 Points

Yes the little D was the problem