css中的transform-origin屬性怎么用

發(fā)布時(shí)間：2022-02-25 13:43:07 來源：億速云閱讀：607 作者：小新欄目：web開發(fā)

小編給大家分享一下css中的transform-origin屬性怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

　　CSS3transform-origin屬性

　　作用：transform-origin屬性允許您改變被轉(zhuǎn)換元素的位置。2D轉(zhuǎn)換元素能夠改變?cè)豿和y軸。3D轉(zhuǎn)換元素還能改變其Z軸。

　　語法：

　　transform-origin:x-axisy-axisz-axis;

　　值

　　描述

　　x-axis

　　定義視圖被置于X軸的何處?？赡艿闹担?/p>

　　●left

　　●center

　　●right

　　●length

　　●%

　　y-axis

　　定義視圖被置于Y軸的何處?？赡艿闹担?/p>

　　●top

　　●center

　　●bottom

　　●length

　　●%

　　z-axis 定義視圖被置于Z軸的何處?？赡艿闹担簂ength

　　注：該屬性必須與transform屬性一同使用。

　　CSS3transform-origin屬性的使用示例

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<style>

　　#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*/

　　}

　　</style>

　　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').innerHTML=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').innerHTML=x+"%"+y+"%";

　　}

　　</script>

　　</head>

　　<body>

　　<p>旋轉(zhuǎn)紅色的DIV元素，嘗試更改其X軸和Y軸：</p>

　　<divid="div1">

　　<divid="div2">HELLO</div>

　　</div>

　　Rotate:

　　<inputtype="range"min="-360"max="360"value="45"onchange="changeRot(this.value)"/>

　　transform:rotateY:(<spanid="persp">45deg</span>);

　　X-axis:<inputtype="range"min="-100"max="200"value="20"onchange="changeOrg()"id="ox"/><br>

　　Y-axis:<inputtype="range"min="-100"max="200"value="40"onchange="changeOrg()"id="oy"/>

　　transform-origin:<spanid="origin">20%40%</span>;

　　</body>

　　</html>

css中的transform-origin屬性怎么用

以上是“css中的transform-origin屬性怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

css中的transform-origin屬性怎么用

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽