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 trialMartin Park
12,792 PointsHelp 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
/* Complete the challenge by writing CSS below */
.wrapper {
perspective: 600px;
}
.photo {
transform: rotateY(30deg);
}
<!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
17,475 PointsIts 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
12,792 PointsMartin Park
12,792 PointsOMG! 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
17,475 PointsFelix Yakubov
17,475 PointsYes the little D was the problem