CSS3 3D Transform Property

Here is the brief description of how to perform 3D transformations in CSS3 using the CSS3 transform property.


CSS3 allows you to perform 3D transformations for your element.3D transform includes the following properties:

Property :


transform: none|transform-functions|initial|inherit;

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%;


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 :
#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 */
<br> <div id="div1">
<div id="div2">transform</div>



Ask Questions

Ask Question