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

Penny Wright
Penny Wright
7,722 Points

I need help with this challenge

Target .photo. Use a 3D transform function to rotate .photo 30 degrees on the Y-axis only.

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

style.css
/* Complete the challenge by writing CSS below */
.wrapper {
 perspective: 600px; 
}
.photo {
 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

Jon Myzzle
Jon Myzzle
6,279 Points

Hello Penny,

Everything you have written above is correct except for the syntax. This is one of those instances where white space is a problem.

You wrote:

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

The above is incorrect due to that LITTLE bit of white space between 'Rotate3d' and the parameters inside the parentheses. See below for the correct syntax:

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

Hope this helps!! Cheers! :beers: