CSS CSS Transitions and Transforms Adding 3D Effects with CSS 3D Transforms Challenge

Martin Park
Martin Park
12,791 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
15,026 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,791 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
15,026 Points

Yes the little D was the problem