From the course: CSS: Transforms and Transitions
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Translations in 3D space - CSS Tutorial
From the course: CSS: Transforms and Transitions
Translations in 3D space
- [Instructor] In this chapter we'll expand our understanding of CSS transformations into the third dimension. Before discussing CSS styles for 3D transformations we need to get grounded, so to speak, in how 3D objects are rendered, and managed in CSS. In a pseudo 3D space that's projected onto a webpage we define positions in terms of length, width, and height. These directions are labeled with a X axis, a Y axis, and a Z axis. All at right angles to each other. The X axis goes horizontally left to right across your screen. The Y axis goes vertically from the top of the screen to the bottom. And the Z axis goes from the back of your screen, conceptually speaking, and then to your eye. Here will be the view looking from your screen into this pseudo 3D space. Notice that in this coordinate system positive X values are to the right of the center of the object while negative values are to the left. Positive Y values are below the axis center, and negative values are above. Now if you had…
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.