CSS3 transform-origin 属性

最新推荐文章于 2024-08-25 20:52:11 发布

崋夏潇尭

最新推荐文章于 2024-08-25 20:52:11 发布

阅读量750

点赞数 1

分类专栏： css css3 html

本文链接：https://blog.csdn.net/zhanghuayao/article/details/80910647

版权

css 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

css3

1 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

关于这个transform-origin属性，在菜鸟教程和w3cschool上，都比较简单，没有深入的研究过。

现在做动画要用到这个属性，所以深入了下，各位有什么好的建议可以留言。

transform-origin属性：基点。

一开始，我没搞清楚基点的位置到底在哪，只知道默认是 50% 50% 0。然后使用rotate旋转元素的时候，看见元素在中心位置旋转角度。

这个旋转点就是基点在元素中心点旋转。然后，我尝试了去改变这个基点的位置，然后看的很懵，基点在哪？？？

我就索性把基点的位置给定位出来了。然后任意改变基点的位置，就明白了，基点的确切位置。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Transform-origin</title>
    <style>
       .parent{
           position: relative;
           width: 200px;height: 200px;
           border: 1px solid black;
           border-radius: 5px;
           margin: 100px;
       }
        .son{
            position: absolute;
            width: 100px;
            height: 100px;
            left: 50px;
            top: 50px;
            background: green;
            transition: 3s;
            transform-origin: 0 0 0;/*基点初始化为0。正常默认是50% 50%*/
        }
        .son:before{
            content: 'x';
            padding-left: 200px;
            position: absolute;
            height: 1px;
            background: orangered;
        }
       .son:after{
           content: 'y';
           padding-top: 200px;
           position: absolute;
           width: 1px;
           background: orangered;
       }
        .origin{
            position: absolute;
            width: 10px;
            height: 10px;
            background: blue;
            border-radius: 50%;
            top: 45px;
            left: 45px;
        }
       .origin:before{
           content: 'x';
           padding-left: 200px;
           position: absolute;
           height: 1px;
           background: darkblue;
           top: 5px;
           left: 5px;

       }
       .origin:after{
           content: 'y';
           padding-top: 200px;
           position: absolute;
           width: 1px;
           background: darkblue;
           top: 5px;
           left: 5px;
       }
        .circle{
            position: absolute;
            width: 10px;
            height: 10px;
            left: 95px;
            top: 95px;
            border-radius: 50%;
            background: black;
            z-index: 5;
        }
        .circle:before{
            position: absolute;
            content: '';
            display: inline-block;
            width: 200px;
            height: 1px;
            background: black;
            top: 5px;
            left: -95px;
        }
        .circle:after{
            position: absolute;
            content: '';
            display: inline-block;
            width: 1px;
            height: 200px;
            background: black;
            top: -95px;
            left: 5px;
        }
        .circle2{
            position: absolute;
            width: 10px;
            height: 10px;

            border-radius: 50%;
            background: red;
            z-index:10;
        }
    </style>
</head>
<body>
    <div id="div1" class="parent">
        <div id="div2" class="son">
            <div id="div3" class="circle2"></div>
        </div>
        <div class="circle"></div>
        <div class="origin"></div>
    </div>
    <br><br>
    <p> <span style="background: blue">蓝点</span>是基点起始位置</p>
    <p> <span style="background: black;color: white">黑点</span>是绿色方块中心点</p>
    <p> <span style="background: red">红点</span>是基点运动的位置</p>
    <p>红点运动时，蓝点和黑点不动，便于与红点对比</p>
    Rotate:
    <input type="range" min="-360" max="360" value="0" οnchange="changeRot(this.value)" />
    transform: rotateY:(<span id="persp">0deg</span>);
    <br><br>
    X-axis:<input type="range" min="-100" max="200" value="0" οnchange="changeOrg()" id="ox" /><br>
    Y-axis:<input type="range" min="-100" max="200" value="0" οnchange="changeOrg()" id="oy" />
    transform-origin: <span id="origin">0%  0% </span>;
    <p>PS:红点在初始定位的时候，为了不与蓝点重合，定位稍微偏移一点。</p>
    <p>   不影响下次定位</p>

</body>
<script>
    function changeRot(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";
    }
    function changeOrg() {
        var x=document.getElementById('ox').value;//x和y的单位也可以是像素 px
        var y=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 + "% ";
        document.getElementById('div3').style.top = y-5 + "%";//减去5是id=div3的宽高是10px,为了定位准确。
        document.getElementById('div3').style.left = x-5 + "%"//.son的宽高设为100px，方便计算。
    }
</script>
</html>

大家看到这篇文章会在菜鸟教程看到一些相似之处，我实在其基础上写了点自己的东西，辅助大家能看得更加明白些。

1、先调节基点的位置，可以看到基点在.son内移动。然后在调节旋转角度。

2、基点的位置超出.son情况，大家尝试下。并观察旋转情况。

3、这个属性用的最多组合就是和rotate配合使用。

4、给大家推荐一个时钟代码，就是用这两个属性搞定的。代码非常简单，易上手。

时钟代码链接地址：http://www.cnblogs.com/beyond-utf-8/p/css3.html

有不足之处请大家留言，谢谢！！！