css中的transform-origin屬性怎么用

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

創(chuàng)新互聯(lián)公司是一家專業(yè)提供秀峰企業(yè)網(wǎng)站建設,專注與成都網(wǎng)站設計、成都做網(wǎng)站、外貿網(wǎng)站建設、HTML5、小程序制作等業(yè)務。10年已為秀峰眾多企業(yè)、政府機構等服務。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進行中。

CSS3transform-origin屬性

作用：transform-origin屬性允許您改變被轉換元素的位置。2D轉換元素能夠改變元素x和y軸。3D轉換元素還能改變其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軸的何處。可能的值：length

注：該屬性必須與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>

<script>

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>旋轉紅色的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>);

<br><br>

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屬性怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當前標題：css中的transform-origin屬性怎么用
本文鏈接：http://muchs.cn/article30/jpejso.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供關鍵詞優(yōu)化、外貿建站、搜索引擎優(yōu)化、品牌網(wǎng)站設計、商城網(wǎng)站、響應式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

手機網(wǎng)站建設