3D Transformations in CSS3
3D Coordinate System
A 3D coordinate system consists of three axes.
- x-axis: horizontal direction, positive to the right, negative to the left
- y-axis: vertical direction, positive dwonward, negative upward
- z-axis: perpendicular to the screen, positive outward, negative inward
Key Concepts of 3D Transformations
- 3D translation: translate3d(x, y, z)
- 3D rotation: rotate3d(x, y, z)
- Perspective: perspective
- 3D rendering: transform-style
3D Translation with translate3d
3D transltaion adds a movement direction along the z-axis to 2D translation.
- transform: translateX(100px) -- moves along the x-axis
- transform: translateY(100px) -- moves along the y-axis
- transform: translateZ(100px) -- moves along the z-axis
- transform: translate3d(x, y, z) -- specifies movement along x, y, and z axes
- Note: values for x, y, and z cannot be omitted; use 0 if not needed
transform: translate3d(100px, 100px, 100px);
transform: translate3d(100px, 100px, 0);
Perspective
Perspective creates a 3D effect by simulating human vision. It should be applied to the parent container of the element being viewed.
- Units are in pixels
- The distance from the viewer (perspective value) affects the size of the object on the plane
Example:
body {
perspective: 1000px;
}
Difference between translateZ and perspective
- Perspective is set on the parent element, while translateZ is applied to child elements.
3D Rotation with rotateX
3D rotation allows an element to rotate around the x, y, z axes or a custom axis.
- Syntax:
- transform: rotateX(45deg) -- rotates 45 degrees around the x-axis
- transform: rotateY(45deg) -- rotates 45 degrees around the y-axis
- transform: rotateZ(45deg) -- rotates 45 degrees around the z-axis
- transform: rotate3d(x, y, z, 45deg) -- rotates around a custom axis
- Left-hand rule:
- Thumb points in the positive x-axis direction
- Fingers curl in the direction of rotation
Example:
div {
perspective: 300px;
}
img {
display: block;
margin: 100px auto;
transition: all 1s;
}
img:hover {
transform: rotateX(-45deg);
}
3D Rotation with rotateY
- Left-hand rule:
- Thumb points in the positive y-axis direction
- Fingers curl in the direction of rotation
Example:
div {
perspective: 500px;
}
img {
display: block;
margin: 100px auto;
transition: all 1s;
}
img:hover {
transform: rotateY(180deg);
}
3D Rotation with rotateZ
- transform: rotate3d(x, y, z, deg) -- rotates around a custom axis
Example:
div {
perspective: 500px;
}
img {
display: block;
margin: 100px auto;
transition: all 1s;
}
img:hover {
transform: rotateZ(180deg);
}
3D Rendering with transform-style
- Controls whether child elements are rendered in 3D space
- transform-style: flat -- child elements are not in 3D space (default)
- transform-style: preserve-3d -- child elements are in 3D space
Example:
<body>
<div class="box">
<div></div>
<div></div>
</div>
</body>
<style>
body {
perspective: 500px;
}
.box {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
transition: all 2s;
transform-style: preserve-3d;
}
.box:hover {
transform: rotateY(60deg);
}
.box div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: pink;
}
.box div:last-child {
background-color: purple;
transform: rotateX(60deg);
}
</style>
