transform

Posted 2020-12-20 yuyujuan

transform分为旋转（rotate），移动（translate），缩放（scale），扭曲（skew），矩阵（matrix）五种：

• rotate：旋转角度为负数的时候为逆时针旋转，为正数的时候为顺时针旋转。
•  scale：缩放基数为1，大于1为放大，小于1为缩小。
•  所有的改变基点默认都是元素的中心点，可以通过设置transform-origin来改变元素基点。
• transform-origin(x,y);其中x和y既可以是百分值、em、px，也可以是left、right、top、bottom、center。
• transform和transform-origin在不同浏览器内核中写法不一样，需要在不同浏览器中加入相应的前缀，下面例子中为了简便而省略了前缀。

.menu ul{

            border-top:15px solid black;

            padding:0 10px;

        }

        .menu ul li{

            text-decoration:none;

            list-style: none;

             outline: none;

        }

        .menu ul li a{

            color:#fff;

            float:left;

            margin:0 5px;

            font-size:14px;

            height:50px;

            line-height:50px;

            text-align:center;

            width:65px;

            padding:10px 5px;

            background:#151515;

            border-radius:0 0 5px 5px;

            box-shadow:0 0 1px #ccc,inset 0 0 2px #fff;

            text-decoration:none;

            list-style: none;

             outline: none;

        }

<div class="menu">
            <ul class="clearfix">
                <li class="item translate"><a href="#">Translate</a></li>
                <li class="item translate-x"><a href="#">Translatex</a></li>
                <li class="item translate-y"><a href="#">Translatey</a></li>
                <li class="item rotate"><a href="#">Rotate</a></li>
                <li class="item scale"><a href="#">Scale</a></li>
                <li class="item scale-x"><a href="#">Scalex</a></li>
                <li class="item scale-y"><a href="#">Scaley</a></li>
                <li class="item skew"><a href="#">Skew</a></li>
                <li class="item skew-x"><a href="#">Skewx</a></li>
                <li class="item skew-y"><a href="#">Skewy</a></li>
                <li class="item matrix"><a href="#">matrix</a></li>
            </ul>
        </div>

.menu ul li.translate a{
            background:#2ec7d2;
        }
        .menu ul li.translate a:hover{
            transform:translate(-10px,-10px);
        }

        .menu ul li.translate-x a{
            background:#8fdd21;
        }
        .menu ul li.translate-x a:hover{
            transform:translateX(-10px);
        }

        .menu ul li.translate-y a{
            background:#f45917;
        }
        .menu ul li.translate-y a:hover{
            transform:translateY(-10px);
        }

        .menu ul li.rotate a{
            background:#d50e19;
        }
        .menu ul li.rotate a:hover{
            transform:rotate(45deg);
        }

        .menu ul li.scale a{
            background:#cdddf2;
        }
        .menu ul li.scale a:hover{
            transform:scale(0.8,0.8);
        }

        .menu ul li.scale-x a{
            background:#0fdd21;
        }
        .menu ul li.scale-x a:hover{
            transform:scaleX(0.8);
        }

        .menu ul li.scale-y a{
            background:#cd5917;
        }
        .menu ul li.scale-y a:hover{
            transform:scaleY(1.2);
        }

        .menu ul li.skew a{
            background:#519;
        }
        .menu ul li.skew a:hover{
            transform: skew(45deg,15deg);
        }

        .menu ul li.skew-x a{
            background:#aa0;
        }
        .menu ul li.skew-x a:hover{
            transform:skewX(-30deg);
        }

        .menu ul li.skew-y a{
            background:#e19;
        }
        .menu ul li.skew-y a:hover{
            transform:skewY(30deg);
        }

        .menu ul li.matrix a{
            background:#919;
        }
        .menu ul li.matrix a:hover{
            transform:matrix(1,1,-1,0,0,0);
        }

上面列出的所有变化都是在以元素中心点为基点的基础上实现的，现在改变元素的基点来达到不同的效果。

当对一个transform运用多个属性值时，多个属性之间用空格间隔：