How to use the transform-origin attribute in css
Xiaobian to share with you how to use the transform-origin attribute in css, I believe most people do not know how to use it, so share this article for your reference, I hope you have a lot of harvest after reading this article, let's go and find out about it together!
CSS3transform-origin properties
Role: The transform-origin property allows you to change the position of the element being transformed. 2D transformation elements can change the x and y axes of elements. 3D conversion elements can also change their Z axis.
Grammar:
transform-origin:x-axisy-axisz-axis;
value
described
x-axis
Defines where the view is positioned on the X axis. Possible values:
●left
●center
●right
●length
●%
y-axis
Defines where the view is positioned on the Y axis. Possible values:
●top
●center
●bottom
●length
●%
The z-axis defines where the view is positioned on the Z axis. Possible values: length
Note: This attribute must be used with the transform attribute.
Example of using the CSS3transform-origin attribute
#div1
{
position:relative;
height:200px;
width:200px;
margin:50px;
padding:10px;
border:1pxsolidblack;
}
#div2
{
padding:50px;
position:absolute;
border:1pxsolidblack;
background-color:red;
transform:rotate(45deg);
transform-origin:20%40%;
-ms-transform:rotate(45deg);/*IE9*/
-ms-transform-origin:20%40%;/*IE9*/
-webkit-transform:rotate(45deg);/*SafariandChrome*/
-webkit-transform-origin:20%40%;/*SafariandChrome*/
-moz-transform:rotate(45deg);/*Firefox*/
-moz-transform-origin:20%40%;/*Firefox*/
-o-transform:rotate(45deg);/*Opera*/
-o-transform-origin:20%40%;/*Opera*/
}
functionchangeRot(value)
{
document.getElementById('div2').style.transform="rotate("+value+"deg)";
document.getElementById('div2').style.msTransform="rotate("+value+"deg)";
document.getElementById('div2').style.webkitTransform="rotate("+value+"deg)";
document.getElementById('div2').style.MozTransform="rotate("+value+"deg)";
document.getElementById('div2').style.OTransform="rotate("+value+"deg)";
document.getElementById('persp')[xss_clean]=value+"deg";
}
functionchangeOrg()
{
varx=document.getElementById('ox').value;
vary=document.getElementById('oy').value;
document.getElementById('div2').style.transformOrigin=x+'%'+y+'%';
document.getElementById('div2').style.msTransformOrigin=x+'%'+y+'%';
document.getElementById('div2').style.webkitTransformOrigin=x+'%'+y+'%';
document.getElementById('div2').style.MozTransformOrigin=x+'%'+y+'%';
document.getElementById('div2').style.OTransformOrigin=x+'%'+y+'%';
document.getElementById('origin')[xss_clean]=x+"%"+y+"%";
}
Rotate the red DIV element to try changing its X and Y axes:
HELLO
Rotate:
transform:rotateY:(45deg);
X-axis:
Y-axis:
transform-origin:20%40%;
The above is "how to use the transform-origin attribute in css" all the contents of this article, thank you for reading! I believe that everyone has a certain understanding, hope to share the content to help everyone, if you still want to learn more knowledge, welcome to pay attention to the industry information channel!
