transition过渡+transform属性+2D+3D旋转、位移、透视

w3c

会员：各大互联网巨头

它设定了整个平台的规则，监督整个过程。

浏览器前缀
谷歌 苹果 -webkit-
火狐 -moz-
IE -ms-
欧朋 -o-

过渡

transition 过渡

之前：元素从一个状态到另外一个状态（hover）直接切换，从开始状态到结束状态瞬间完成，中间过程几乎不可见。

css3新增了过渡这个属性，可以实现元素不同状态之间的平滑过渡。

• transition-property:指定过渡的属性。 all为指定所有属性都有过渡效果。 必须
• ransition-duration: 过渡的时间，单位可以是s或者ms。 必须
• transition-delay:指定过渡生效的延迟时间。
• transition-timing-function: 指定过渡的运动曲线
  ease 慢慢减速
  linear 匀速
  ease-in 加速
  ease-out 减速
  ease-in-out 先加速后减速

eg:

        .box {
            width: 200px;
            height: 200px;
            background-color: brown;
            transition-property: all;
            transition-duration: 2s;
            transition-delay: 2s;
            transition-timing-function: ease-in;
        }
        .box:hover {
            width: 800px;
            background-color: burlywood;
        }

过渡属性 完成时间 运动曲线 延迟时间
transition：all 3s linear 1s;

一般有数值/中间状态的属性才可以设置过渡，比如：width，height

缩放，位移，旋转，倾斜

transform 属性

缩放 scale

放大缩小
格式:

• transform：scale(x,y);
• x:代表水平方向的缩放倍数
• y：代表垂直方向的缩放倍数。
• 如果只写一个值，代表等比例缩放。
• 不会改变真实宽高，也不会旁边的盒子造成影响

位移 translate

格式：
tramsform：translate（水平位移，垂直位移）

属性值：

• px 正值：向右或向下。
• 百分比 是按照盒子本身的宽高。

只写一个值时，是水平位移。

旋转 rotate

格式： transform：rotate（角度）
单位：deg

倾斜 skew

格式：transform：skew（水平倾斜角度，垂直倾斜角度）
单位是deg，正值 顺时针，负值逆时针。

        .box{
            width: 600px;
            height: 600px;
            transform: skew(45deg,0deg);
        }

3D旋转

transform: rotate3D(x,y,z,deg);
x,y,z 是一个0/1的数值，0表示不旋转，1表示旋转，deg表示旋转的角度

 .box {
            transform: rotate3D(1,1,1,180deg);
        }

• rorateX，X轴旋转
• rorateY，Y轴旋转
• rorateZ， Z轴旋转

 .box:hover {
       transform: rotateX(180deg);
       transform: rotateY(180deg);
       transform: rotateZ(180deg);
    }

旋转的方向：左手法则

**左手法则:**左手握住旋转轴，大拇指指向旋转的正方向，其他手指的卷曲方向就是旋转的正方向。

3D位移

transform: translate3d(x,y,z);

    .box:hover{
       transform: translate3d(100px,100px,0px);
    }

• transform: translateX(); //沿着x轴移动
• transform: translateY();//沿着Y轴移动
• transform: translateZ();//沿着Z轴移动

     .box {
        transform: translateX(100px);
        transform: translateY(100px);
        transform: translateZ(100px);
    }

透视

透视：

• 设置给变换盒子的父容器。
• 设置用户眼睛与屏幕的距离。
• 透视效果只是视觉上的呈现，不是真正的距离。

        body {
            perspective: 200px;
        }

perspective 透视：

• translateZ为正值，perspective值越小，盒子与你的距离越近，看到的效果也就越大。
• translateZ为0，perspective不管怎么变化，盒子上的阴影不变，看到的效果不变。
• translateZ为负值，perspective值越小，盒子与你的距离越近，看到的效果也就越小。