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

i don't know what i must do

i write a code but i get error

style.css
/* Complete the challenge by writing CSS below */
.wrapper{
  perspective:600px;
}
.photo{
  transition: transform 1s cubic-bezier(.55, -.62, .27, 1.2);
  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

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 83,362 Points

Hi Mohamed,

I see what you're trying to do with your code above, but all you need for the challenge is to target the photo class. You don't need to do anything on hover.

So you simply do

.wrapper{
  perspective:600px;
}

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