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

Jacob Hopkins
Jacob Hopkins
7,310 Points

Next, target .photo. Use a 3D transform function to rotate .photo 30 degrees on the Y-axis only. What am I missing?

What am I doing wrong?

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

.wrapper {
  perspective: 600px;
  transform-style: preserve-3d; 
}

.photo {
  transform: rotate3d(0, 30deg, 0);
}
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

Belve Marks
Belve Marks
7,331 Points

your transform gets one more argument: rotate3d(x, y, z, a). The first three arguments are the axes you want to rotate, the last argument is the angle. Try

transform: rotate3d(0, 1, 0, 30deg);

check out the MDN

Jacob Hopkins
Jacob Hopkins
7,310 Points

Thank you! I was so stuck on this.

Robbie Thomas
Robbie Thomas
31,091 Points

I did the same thing and it told me no, but perhaps I was missing the semi-colon.