In essence, any transform that has a 3D operation as one of its functions will trigger hardware compositing, even when the actual transform is 2D, or not doing anything at all (such as translate3d(0,0,0)). Dean Jackson, CSS 3D transform spec author and main WebKit dude, wrote: These 3-argument transform3d() functions also have the benefit of triggering hardware acceleration. ThereвЂ™s also several shorthand transform functions so you can set values for all three dimensions:

Instead, using rotateX() rotates an element around the horizontal X axis, so the top of the element angles back and away, and the bottom angles near. This is a bit counter-intuitive at first, as you might imagine that rotateX() will rotate an object horizontally left or right. The rotate functions rotate the element around the corresponding axis. Positive values position the element closer to the viewer, negative values further away. Whereas translateX() positions an element along the horizontal X axis, translateZ() positions it along the Z axis, which runs front to back in 3D space. If youвЂ™re familiar with 2D transforms, youвЂ™ll find the basic 3D transform functions similar. With a 3D space initialized with perspective, we can now transform elements in three spatial dimensions with the third Z dimension.ДЈD transforms use the same transform property used for 2D transforms.

As a web designer, youвЂ™re probably well acquainted with working in two dimensions, X and Y, positioning items horizontally and vertically.

Transform css