2D transform

1.过渡　　transition

transition: 要过渡的属性  花费的时间  运动曲线  经过多久开始执行过渡效果

        .transition {
            background: red;
            width: 100px;
            height: 100px;
            /* 谁过渡给谁加 transition */
            transition: all 5s linear 2s;
        }

        .transition:hover {
            background: gold;
            /* transform: translate(100px, 123px); */
            transform: rotate(199deg);
        }


    <div class="transition">
        过渡效果
    </div>

 

1. translate 移动

transform: translate()/ translateX() /translateY();

定义标签在2D转换中沿着X、Y轴移动；不会影响到其他标签的位置；对行内标签没有效果。

       content div {
            width: 100px;
            height: 100px;
          
        }
        div:nth-child(1) {
            background: rgb(121, 119, 119);
            color: red;
            transition: all 2s;
        }
        div:nth-child(1):hover {
            transform: translate(100px, 50px);
        }


 <content>
    <div>####</div>
 </content>

 

2.rotate  旋转

transform: rotate(ndeg); // n 为度数

       content div {
            width: 100px;
            height: 100px;
          
        }
        div:nth-child(1) {
            background: rgb(121, 119, 119);
            color: red;
            transition: all 2s;
        }
        div:nth-child(1):hover {
            transform: rotate(100deg);
        }



 <content>
    <div>####</div>
 </content>

 

3.transform-origin(x y)　　设置锚点

x y 可以是方位、百分比、px

        .content {
            background: skyblue;
            position: absolute;
            width: 300px;
            height: 300px;
            top: 50%;
            right: 50%;
            transform: translate(50%, -50%);
        }
        .a {
            background: gold;
            width: 100px;
            height: 100px;
            position: absolute;
            top: calc(50% - 50px);
            right: calc(50% - 50px);
            overflow: hidden;
           
        }
        .a::after {
            content: '';
            width: 100px;
            height: 100px;
            top: 100px;
            left: 0;
            position: absolute;
            background: rgba(0, 0, 0, 0.5);
            transition: all 4s;
            /* 旋转的锚点代码写在做动画前的标签上面 */
            transform-origin: left top;
            
        }

        .a:hover::after {
            transform: rotate(-90deg);
        }



    <div class="content">
        <div class="a"></div>
    </div>

 

4.scale 缩放  可以设置缩放的锚点，默认以中心点缩放；不会影响其他标签的位置

transform: scale(宽,高);

　　

        .scale {
            width: 200px;
            height: 200px;
            background: red;
            position: relative;
        }
        .scale .s {
            width: 100px;
            height: 100px;
            background: blue;
            position: absolute;
            left: calc(50% - 50px);
            top: calc(50% - 50px);
            transition: all 1s;
            /* 改变缩放锚点 */
            transform-origin: 0 0;
        }
        .scale .s:hover {
            transform: scale(0.5);
        }


    <div class="scale">
        <div class="s"></div>
    </div>