CSS3 3D Transform Property
Here is the brief description of how to perform 3D transformations in CSS3 using the CSS3 transform property.
Explanation
CSS3 allows you to perform 3D transformations for your element.3D transform includes the following properties:
transform-origin
Syntax: transform: none|transform-functions|initial|inherit; Where, none - Defines that there should be no transformation initial - Sets this property to its default value. inherit - Inherits this property from its parent element. transform-functions - Transform functions include matrix(), matrix3d(), translate(), translate3d(), translateX(), translateY(), tranlateZ(), scale(), scale3d(), scaleX(), scaleY(), scaleZ(), rotate(), rotate3d(), rotateX(), rotateY(), rotateZ(), skew(), skewX(), skewY(), perspective().
transform: rotate(7deg); transform-origin: 20% 40%;
Example :
Result:
- transform-origin
- transform-style
- perspective
- perspective-origin
- backface-visibility
- rotatex(),rotatey(),rotatez()
- translatex()
- scalex()
Property :
transformtransform-origin
Syntax: transform: none|transform-functions|initial|inherit; Where, none - Defines that there should be no transformation initial - Sets this property to its default value. inherit - Inherits this property from its parent element. transform-functions - Transform functions include matrix(), matrix3d(), translate(), translate3d(), translateX(), translateY(), tranlateZ(), scale(), scale3d(), scaleX(), scaleY(), scaleZ(), rotate(), rotate3d(), rotateX(), rotateY(), rotateZ(), skew(), skewX(), skewY(), perspective().
Usage:
transform: rotate(7deg); transform-origin: 20% 40%;
Definition:
CSS3 allows you to format your elements using 3D transformations. The transform property applies a 2D or 3D transformation to an element. The CSS3 transform property allows you to rotate, scale, move, skew elements. The transform-origin property allows you to change the position of transformed elements.
Example :
<style>
#div1 {
border: 1px solid black;
height: 70px;
margin: 10px;
padding: 10px;
width: 100px;
}
#div2 {
background-color: red;
padding: 10px;
position: absolute;
transform: rotate(45deg);
transform-origin: 20% 40%;
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
-webkit-transform-origin: 20% 40%; /* Chrome, Safari, Opera */
}
</style>
<br> <div id="div1">
<div id="div2">transform</div>
</div>
#div1 {
border: 1px solid black;
height: 70px;
margin: 10px;
padding: 10px;
width: 100px;
}
#div2 {
background-color: red;
padding: 10px;
position: absolute;
transform: rotate(45deg);
transform-origin: 20% 40%;
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
-webkit-transform-origin: 20% 40%; /* Chrome, Safari, Opera */
}
</style>
<br> <div id="div1">
<div id="div2">transform</div>
</div>
Result:
transform
