CSS—动画之transform

目录

一、概述

二、详解

---

一、概述

transform是CSS3新增加的属性，主要控制元素变形，没有一个时间控制的概念。

二、详解

旋转

transform:rotate(xxxdeg); //使元素旋转多少度，正数为顺时针旋转多少度, 负数为逆时针旋转多少度

<style>
    div {
        width: 200px;
        height: 200px;
        position: absolute;
        top: 50%;
        margin-top: -100px;
        left: 50%;
        margin-left: -100px;
        background-color: red;
        transform: rotate(45deg); /*顺时针旋转45度*/
        -moz-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
    }
</style>
<div></div>

 

缩放

transform: scale(xxx); // 表示水平和垂直同时缩放多少倍
transform: scale(xxx,xxx); // 表示水平和垂直各缩放多少倍
transform: scaleX(xxx); // x轴缩放多少倍
transform: scaleY(xxx); // y轴缩放多少倍

<style>
    div {
        width: 200px;
        height: 200px;
        position: absolute;
        top: 50%;
        margin-top: -100px;
        left: 50%;
        margin-left: -100px;
        background-color: red;
    }
        
    div::after {
        content: "";
        display: block;
        width: 200px;
        height: 200px;
        background: red;
        transform: scale(1);
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transition: all 1s;
        -moz-transition: all 1s;
        -webkit-transition: all 1s;
        -o-transition: all 1s;
        -ms-transition: all 1s;
    }
        
    div:hover::after {
        transform: scale(2);
        transition: all 1s;
    }
</style>
<div></div>

倾斜

transform: skew(xxxdeg); // 表示水平方向倾斜多少度
transform: skew(xxxdeg, xxxdeg); // 表示水平和垂直方向各倾斜多少度
transform: skewX(xxxdeg); // x轴旋转多少度
transform: skewY(xxxdeg); // Y轴旋转多少度

<style>
    div {
        width: 200px;
        height: 200px;
        position: absolute;
        top: 50%;
        margin-top: -100px;
        left: 50%;
        margin-left: -100px;
        background-color: red;
        -moz-transform: skew(45deg); 
        -webkit-transform: skew(45deg); 
        -o-transform: skew(45deg); 
        -ms-transform: skew(45deg); 
        transform: skew(45deg); 
    }
</style>
<div></div>

移动

transform: translate(xxxpx);        // 表示水平方向移动的距离
transform: translate(xxxpx, xxxpx); // 表示水平、垂直方向移动的距离

/*常用于水平垂直居中*/
div{
    position: absolute;
    top:50%;
    left:50%;
    -moz-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

基准点

transform-origin属性用来设置元素运动的基准点（参照点），默认为元素的中心点。

transform-origin: x-axis y-axis; 

// x-axis: left/center/right/length/%
// y-axis: top/center/bottom/length/%
// right bottom=> 100% 100%
// left top => 0% 0%