CSS 47 💻 transform perspective, rotate and rotate3d

a - transform perspective
perspective gives the appearance that elements are being viewed from a particular distance.
This creates a 3D effect
value: length → defines the depth of the field at which the viewer is located
smaller length values create a greater perspective effect
perspective: 600px; → sets the distance from the viewer to 600px
transform-style: preserve-3d; → ensures the faces are treated as 3D objects
faces are positioned absolutely within the cube container

b - transform rotate and rotate3d
rotate rotates an element around a fixed point
value: angle → specifies the angle of rotation
Positive values → clockwise rotation, Negative values → counterclockwise rotation
transform: rotate(45deg); → Rotates the image 45 degrees clockwise
rotate3d allows you to apply a 3D rotation
It take 4 values, x, y, z define the direction of the rotation
angle defines the degree of the rotation around the specified axis
transform: rotate3d(1, 1, 1, 90deg); → rotates along a diagonal line from one corner to the opposite corner