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

Mohamed Monir
Mohamed Monir
19,717 Points

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 82,447 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);
}