From the course: CSS: Transforms and Transitions
Join today to access over 25,500 courses taught by industry experts.
Solution: 3D transformation challenge - CSS Tutorial
From the course: CSS: Transforms and Transitions
Solution: 3D transformation challenge
(upbeat music) - [Instructor] In this challenge exercise, you were asked to apply your knowledge of CSS 3D transformation styles to this webpage in which hovering the mouse pointer over the figure box would cause a different images to appear to recede into the distance. Now let's take a look at the code that causes this effect. In our style sheet, we have to add two style rules. The first is applied to figure elements nested within the div element with the Id slidecontainer. Within that style, we want to create the transform style rule that sets the perspective value to 100 pixels that moves the figure zero pixels along the X axis and zero pixels along the Z axis and it also rotates zero degrees around the X axis. We want to place the transformation origin 200 pixels to the right, therefore setting it outside the boundaries of the figure box and also align that with the top of the figure box. We also want to add a box…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.