Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Posted by Jonathan Guerrero
.a{fill-rule:evenodd;}techdegree seal-36
Jonathan Guerrero
Front End Web Development Techdegree Graduate 18,245 Points

hello, can anybody help me. I've used this code but it doesn't work

Not sure why it doesn't work

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

.wrapper {
  perspective: 600px;
}

.photo {
  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

Cameron Childres
Cameron Childres
11,817 Points
Cameron Childres
Cameron Childres
11,817 Points

Hi Jonathan,

Your code produces the desired result and works well. The reason it won't pass is because the challenge wants you to use the rotate3d() function -- the shorthand isn't accepted by the test.

These two rules are equivalent but only the second will pass here:

.photo {
  transform: rotateY(30deg);
}

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