transform-origin盒子旋轉位置

本文轉載自查看原文 2019-10-19 21:02 264

transform-Origin屬性允許您更改轉換元素的位置。

2D轉換元素可以改變元素的X和Y軸。 3D轉換元素，還可以更改元素的Z軸。

為了更好地理解Transform-Origin屬性，請查看這個演示.

x-axis

定義視圖被置於 X 軸的何處。可能的值：

left
center
right
length
%

y-axis

定義視圖被置於 Y 軸的何處。可能的值：

top
center
bottom
length
%

z-axis

定義視圖被置於 Z 軸的何處。可能的值：

length

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            
            .a1{
                position: relatve;
                height: 200px;
                width: 80px;
                background: springgreen;
                border:1px solid black;    
                margin:100px 200px;
                color: white;
                font-size: 30px;
            }
            #b2{
                position: absolute;
                background: rgba(0,0,225,0.5);
                height: 200px;
                width: 80px;
                color: white;
                transform:rotate(70deg)
            }
                
            
        </style>
    </head>
    <body>
        1
        <div class="a1">
            <div id="b2" style="transform-origin: left top;">左上</div>
        </div>
        2
        <div class="a1">
            <div id="b2" style="transform-origin: right top;">右上</div>
        </div>
        3
        <div class="a1">
            <div id="b2" style="transform-origin: center top;">中上</div>
        </div>
        4
        <div class="a1">
            <div id="b2" style="transform-origin: left bottom;">左下</div>
        </div>
        5
        <div class="a1">
            <div id="b2" style="transform-origin: left center;">左中</div>
        </div>
        6
        <div class="a1">
            <div id="b2" style="transform-origin: right top;">右上</div>
        </div>
        7
        <div class="a1">
            <div id="b2" style="transform-origin: right bottom;">右下</div>
        </div>
        8
        <div class="a1">
            <div id="b2" style="transform-origin: bottom center;">下中</div>
        </div>
        9
        <div class="a1">
            <div id="b2" style="transform-origin:center center;">中中</div>
        </div>
    </body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 transform-origin屬性 transform-origin屬性關於transform-origin屬性（transform）變形--原點 transform-origin transform(變形)和transform-origin(變形原點) CSS transform(變形)和transform-origin(變形原點) CSS3形變——transform與transform-origin畫時鍾妙用transform-origin，控制動畫方向 IOS---transform(控件位置，大小，旋轉變化) 【css】transform（旋轉，平移，縮放，扭曲）及變換參考點的位置