CSS3 3D Transform Scale Property
Here is a brief description of how to increase or decrease the size of a 3D element in CSS3 using the CSS3 3D scale() property method.
Explanation
Property :
scale() scale3d(x,y,z) - Defines a 3D scale transformation property scaleX(x) - Defines a 3D scale transformation by giving a value for the X-axis scaleY(y) - Defines a 3D scale transformation by giving a value for the Y-axis scaleZ(z) - Defines a 3D scale transformation by giving a value for the Z-axisUsage:
transform:scaleX(1.5);
transform:scaleY(1.5);
transform:scaleZ(1.5);
Definition:
The transform scale() property method increases or decreases the size of an element.
It takes the following values.
- scaleX(x) : Defines a scale transformation by giving a value for the X-axis
- scaleY(x) : Defines a scale transformation by giving a value for the Y-axis
- scalez(x) : Defines a scale transformation by giving a value for the Z-axis
Example :
<style>
.demodiv {
position: relative;
height: 100px;
width: 100px;
background-color: indigo;
color:white;
margin:50px;
}
#div1 {
transform:scaleX(2);
}
</style>
<div id="div1" class='demodiv'>scaleX</div>
.demodiv {
position: relative;
height: 100px;
width: 100px;
background-color: indigo;
color:white;
margin:50px;
}
#div1 {
transform:scaleX(2);
}
</style>
<div id="div1" class='demodiv'>scaleX</div>
Result:
scaleX
