Using just a touch of 3d can make your UI stand out from the rest. But the problem with the current CSS system is we have to do a lot of math and to do object placement in 3d space is not too convenient. Mainly because CSS is not a great way to 3d nor it was intended to be. The obvious problem here is how to use cs 3d transforms using perspective.
To use 3d perspective transforms on any object, you can use transform property and its values to manipulate, move objects in 3d space. How the individual objects will behave in a scene depends on the transformation of an object or parent and its transform origin. The key discovery of the article is to understand how transforms and transform-origin affect the object with respect to its parent in 3d space.
3D Transform and Perspective:
To enable 2d or 3d transforms in CSS we can use the transform property. Transform property visually moved the object in 3d space while keeping its placement in DOM.
Syntax:
transform: <value> <value>;Value: Value for the transform can single or multiple be 2d or 3d functions. Let's have a look at both types of values.
Values That affects CSS 3D Transforms:
We need a 3rd dimension to activate 3D. So we have to use any one of the below property values. We can combine multiple 3d properties separated by a space. We can use a combination of 2d and 3d properties to be used with perspective.
- translate3d(tx,ty,tz): move object along the X, Y & Z-axis.
- translateX(tx): move object along the X-axis.
- translateY(ty): move object along the Y-axis.
- translateZ(tz): move object along the Z-axis.
- rotate3d(x,y,z, a): rotates object by (a)angle around the [x,y,z] direction vector.
- rotateX(a): rotates object around the X-axis.
- rotateY(a): rotates object around the Y-axis.
- rotateZ(a): rotates object around the Z-axis.
- scale3d(sx,sy,sz): scales tobject in [x,y,z] direction
- scaleX(sx): scales object along the X-axis.
- scaleY(sy): scales object along the Y-axis.
- scaleZ(sz): scales object along the Z-axis.
- matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n): defines a 3D transformation in a 16 value matrix.
- perspective(length): Defines how close or far the viewer is to a 3D transformed object.
Values That does not affects CSS 3D Transforms:
Transform properties can have 2d values as well. But these values/functions do not affect perspective in any kind being a 2d transform in nature. So let's just pretend 2d transforms do not exist in our context. Values that can be used in conjunction with any 3d function are:
- rotate(a): rotates object by (a)angle
- skew(a,a): skews object by (a)angle in x, by y directions
- translate(tx,ty): moves object by tx in x-direction , by ty in y-direction
- scale(sx,sy): scales object by sx in x-direction, by sy in y-direction
All the valid length values are supported as a parameter in these transform functions. So we're free to use px, pt, cm, em, rem, vw, vh, % values in any of the transform functions.
Transforming Element Using CSS 3D Transforms:
The basic transformation: translate, rotate, scale, skew can be done in 2d and 3d space using their respective functions. There are two factors that affect 3d view are perspective and transform-origin. Transform-origin property does not affect 2d translate function but all other functions are affected by the position of transform-origins. I have written an article explaining perspective-origin in my other article.
Please Note:
Transforms are not the same as using CSS position property. Using position and any of the Top, Left, Right, and Bottom properties we can move elements but position moves the actual element in space. Not convenient for transitions or animations.
The CSS position property is a lot more straightforward - it simply allows you to set where an element should be placed on the page. However, this can be less flexible than using transforms, especially if you're trying to create a design that looks good on different screen sizes.
Understanding Transform Origins:
The transform-origin is the point around which a transformation is applied. This single point is a pivot point, a center of gravity for all transformation for that object. This point only moves in 2d space. So even the plane is rotated in 3d, the transform-origin always stays into x,y coordinates of the respective plane. Let's check transform-origin in the context of the perspective transform.
Note: To enable 3d we have to use the perspective function of perspective property. Why?
The transform-origin will act as a 2d point for the parent container element. All the child elements will inherit the same origin when performing their transformation. We can use nested groups using this principle and create complex geometry.
CSS 3D Rotation in Perspective:
In the below example, we're using simple keyframe animation to apply 3d rotations to the object. You can move slider values to change the transform-origin and change perspective value.
Observe: when a transform-origin is moved, The rotation of the element gets affected. How it is affected is clearly visible in the example. The pivot point is the pinpoint from where the rotation starts.
If we turn off perspective, we can still see the Z rotation. But rotation in X and Y will give us an impression of element scaling in x and y-axis because there is no perspective.
CSS 3D Scale in Perspective:
In the example below, we're scaling the 3d object in x and then y directions. Since the transform-origin is on the top plane of the object. It will act as a pivot for scaling the element and its parents.
You can observe the behavior of a scale by moving the transform-origin using sliders. You can change the perspective value to change the depth of the element. The element itself is a 3d object. But the transform-origin does not work as a pivot for ScaleZ. The child elements will get a 3d scale in the Z direction but changing transform-origin on the parent won't affect scaling at all. This is the behavior of transform-origin. It only acts as a pivot for the 2d plane.
If we turn off the perspective, we can see the scale in the X and Y axis but without depth, scaling in the Z direction does not seem to work.
CSS 3D Translation in Perspective:
The translation is comparatively easy to understand because transform-origin has no effect on any of the translate functions. You can observe the example below.
If you move any of the sliders, it changes the perspective values and transform-origins but the transformations on the object are not affected by those changes. Because translations do not require any transform-origins.
If we turn off perspective, We can still see translation in x and y-direction. Z-direction will not work because there is no depth.
CSS Skew (Non-3D) in Perspective:
Skew does not have a 3d function but transform-origin behaves the same as scale on skew function. We'll use the same book demo and use skewX and skewY functions to skew the parent object.
Since it's just a 2d function, It behaves like any other 2d function (translate, rotate, scale). Skew can use transform-origin and manipulate the parent element in 2d space. The child element will inherit the parent.
Why this is so important to know is: To understand that, we can use 2d transform function on the parent with 3d child elements. Or combine 2d and 3d functions together to get the desired result. There are many tricks you can do by mastering 3d transform. You can ready about Top CSS Tricks in my other article.
How I can use CSS 3D Transforms in UI elements?
Most of the UI frameworks use CSS transforms to do part of UI like Tooltips, Input Validations, Dialog boxes, Navigation Items, Gallery Images, etc. If you master the art of perspective, With too little work you can get your UI a more modern feel. This is however subjective, So let me know if you're going to try Perspective transforms in your UI design.
