In 2D transform an element can be transform in 2 dimensions
like x-axis and y-axis. While in in this chapter we will learn
about 3D transform. 3D transform consists on 3 dimensional
transformation like x-axis, y-axis and z-axis. This is latest
property in CSS3 and this most popular to make an element
most attractive for designing.
There are some example of 3D transform property with example
and source code are given below.
Method for 3D transform
1) translate3d(x,y,z)
2) translateX(x)
3) translateY(y)
4) translateZ(z)
5) matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
6) scaleX(x)
7) scaleY(y)
8) scaleZ(z)
9) rotateX(angle)
10) rotateY(angle)
11) rotateZ(angle)
These all properties are explained below with source code.
Example of translate3d(x,y,z)
In this example image will more 50px to x-axis, 25px to y-axis and 25px to z-axis.
<styletype="text/css">div{height:150px;width:150px;border:3px solid lightgreen;background:lightgrey;}img{height:150px;width:150px;border:1px solid grey;transform:translate3d(50px, 25px, 25px);}</style>
<div><imgsrc="img/blog-img/lb-4.jpg"/></div>
Output of above code
Example of translateX(x)
In this example image will move 50px to x-axis.
<styletype="text/css">div{height:150px;width:150px;border:3px solid lightgreen;background:lightgrey;}img{height:150px;width:150px;border:1px solid grey;transform:translateX(50px);}</style>
<div><imgsrc="img/blog-img/lb-4.jpg"/></div>
Output of above code
Example of translateY(y)
In this example image will move 50px to y-axis.
<styletype="text/css">div{height:150px;width:150px;border:3px solid lightgreen;background:lightgrey;}img{height:150px;width:150px;border:1px solid grey;transform:translateY(50px);}</style>
<div><imgsrc="img/blog-img/lb-4.jpg"/></div>
Output of above code
Example of translateZ(z)
In this example image will move 50px to z-axis.
<styletype="text/css">div{height:150px;width:150px;border:3px solid lightgreen;background:lightgrey;}img{height:150px;width:150px;border:1px solid grey;transform:translateZ(50px);}</style>
<div><imgsrc="img/blog-img/lb-4.jpg"/></div>
Output of above code
Example of scaleX(x)
In this example image scale will increase 2 to x-axis.
<styletype="text/css">div{height:100px;width:100px;border:3px solid lightgreen;background:lightgrey;}img{height:100px;width:100px;border:1px solid grey;transform:scaleX(2);}</style>
<div><imgsrc="img/blog-img/lb-4.jpg"/></div>
Output of above code
Example of scaleY(y)
In this example image scale will increase 2 to y-axis.
<styletype="text/css">div{height:100px;width:100px;border:3px solid lightgreen;background:lightgrey;}img{height:100px;width:100px;border:1px solid grey;transform:scaleY(2);}</style>
<div><imgsrc="img/blog-img/lb-4.jpg"/></div>
Output of above code
Example of scaleZ(z)
In this example image scale will increase 2 to z-axis.
<styletype="text/css">div{height:100px;width:100px;border:3px solid lightgreen;background:lightgrey;}img{height:100px;width:100px;border:1px solid grey;transform:scaleZ(2);}</style>
<div><imgsrc="img/blog-img/lb-4.jpg"/></div>
Output of above code
The Best
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.
