3D Transform in CSS
3D Transform are attributes used to process 3D moving effects for elements in 3 axes: x, y and z.
Transform in CSS are attributes used to "transform" the original elements, allowing us to change position, shape or rotate elements in dimensions.
There are two common types: 2D and 3D transformation.
(Transformation is a generic method of changing the shape, size and position of an element).
In this article, TipsMake.com will work with you to learn about 3D Transform, values, usage as well as the most specific examples for you to easily imagine.
What is 3D Transform?
3D Transform are attributes used to process 3D moving effects for elements in 3 axes: x, y and z.
The syntax for creating transforms is as follows:
transform: value; The values commonly used with 3D transform are:
- rotateX ()
- rotateY ()
- rotateZ ()
Transform rotateX ()
RotateX () is used to rotate the element around the X axis at a certain angle.
#myDiv {
-webkit-transform: rotateX(150deg); /* Safari */
transform: rotateX(150deg);
}
Original image:
(* The examples in the article are all transformed from this image)
Figure Transform
The usual div element.
Website TipsMake.com
The div element is rotateX 150deg.
>
Website TipsMake.com
Transform rotateY ()
RotateY () is used to rotate the element around the Y axis at a specified angle.
#myDiv {
-webkit-transform: rotateY(130deg); /* Safari */
transform: rotateY(130deg);
}
The usual div element.
Website TipsMake.com
The div element is rotateY 150deg.
Website TipsMake.com
Transform rotateZ ()
RotateZ () is used to rotate the element around the Z axis at a certain angle.
#myDiv {
-webkit-transform: rotateZ(90deg); /* Safari */
transform: rotateZ(90deg);
}
The usual div element.
Website TipsMake.com
The div element is rotateZ 150deg.
Website TipsMake.com
To use this attribute fluently, you must practice a lot and capture the coordinates for easy navigation. With transform, you can completely create an interface with many 2D and 3D shapes, making the website more lively and professional. TipsMake.com will explore this issue further in the following lessons. Have you remembered to it!
Previous lesson: 2D Transform in CSS
Next lesson: Transition transition effect in CSS
You should read it
- 2D Transform in CSS
- Appears a free game that allows you to practice being a hacker
- How to transform into a superhero in Avengers: EndGame
- 5 Ways Blockchain Technology Can Transform IoT
- How to Transform Mac Into Windows PC
- Resize, position, rotate, and flip images in Adobe Illustrator
- Transform, fragment, hide: new mantra for hackers
- What will you do when there are multiple Pokemon in Pokemon GO?
- Suggest how to mix things for couples on Christmas night
- How to Become a Vampire in Skyrim
- Exotic metal knows 'transformations' back to the original shape no matter how deformed
- Transform the socks into super cute utensils
Maybe you are interested
Which water filter can remove styrene in water? What kind of good household water purifier should buy today? 4 basic notes for using water purifiers more efficiently Tell you how to fix the water filter that has leaked water Why should you buy Sunhouse SHR76210CK integrated RO water heater? Answer questions: Is the water filter as much as the filter core is cleaner?