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

Owa Aquino
Owa Aquino
19,277 Points

I don't know what's wrong with my code. Can't seem to complete the challenge. :(

Hi housemates!

Can anyone verify my answer for this 3d transition challenge? It doesn't seem to work.. and I don't know where I went wrong. Thank you in advance.

My answer:

/* Complete the challenge by writing CSS below*/
.wrapper {
  perspective: 600px;
}

.photo {
  transform-style: preserve-3d;
  transform: rotateY(30deg);
}
style.css
/* Complete the challenge by writing CSS below*/
.wrapper {
  perspective: 600px;
}

.photo {
  transform-style: preserve-3d;
  transform: rotateY(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

Jennifer Nordell
STAFF
Jennifer Nordell
Treehouse Staff

The challenge wants you to specifically use the rotate3d function but only rotate on the y-axis. This is how we would do this with the rotate3d function:

.photo {
  transform: rotate3d(0, 1, 0, 30deg);
}
Owa Aquino
Owa Aquino
19,277 Points

A follow up question. Which is the best practice that should I use/apply on my work?

Thank you very much again Jennifer.

Cheers!

Jennifer Nordell
Jennifer Nordell
Treehouse Staff

Owa Aquino Honestly? I don't think it really matters when just dealing with rotation on one axis. But if you're going to be rotating on multiple axes simultaneously then this will save you a bunch of typing :smile:

Owa Aquino
Owa Aquino
19,277 Points

Thanks again Jennifer! :)