zoukankan html css js c++ java

transform-origin盒子旋转位置

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>

查看全文

相关阅读:
[分治FFT]「CTSC2018」青蕈领主
 [边分治+线段树合并]「CTSC2018」暴力写挂
 [模板]MTT
[模板]NTT
[矩阵求逆+二分图匹配]BZOJ 3168 [Heoi2013]钙铁锌硒维生素
 [BZOJ1925][SDOI2010]地精部落(DP)
[BZOJ1047][HAOI2007]理想的正方形(RMQ+DP)
[POJ3630]Phone List (Tire)
[POJ1193][NOI1999]内存分配(链表+模拟)
[POJ2823]Sliding Window 滑动窗口(单调队列)

原文地址：https://www.cnblogs.com/niuyaomin/p/11705179.html