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

Jeffry Jimenez
Jeffry Jimenez
5,693 Points

Target .photo. Use a 3D transform function to rotate .photo 30 degrees on the Y-axis only... I can't figure this out.

why is is this not working?

style.css
/* Complete the challenge by writing CSS below */
.wrapper {
  perspective: 600px;
}
.photo {
  transition: transform 1s;
  transform-style: preserve-3d;
}
.photo:hover {
  transform: rotate3d(0, 1, 0, 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

Chris Shaw
Chris Shaw
26,627 Points

Hi jeffry jimenez,

You have the correct transform, but you have put it inside a :hover selector which the task didn't ask for. You simply need the below.

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

Happy coding!

Jeffry Jimenez
Jeffry Jimenez
5,693 Points

Thank you Chris Upjoh, you helped me a lot. Have a good day.