过渡transition，transform2D转换，3D旋转

过渡，2D转换

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

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

transition-property:指定过渡的属性。 all为指定所有属性都有过渡效果。 必须写
transition-duration: 过渡的时间，单位可以是s或者ms。
必须写
transition-delay:指定过渡生效的延迟时间。

    transition-property: all;
    transition-duration: 2s;
    transition-delay: 2s;

transition-timing-function:
ease 慢慢减速
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
复合写法：

过渡动画transition可以组合简写

 div.box{ transition:all 0.5s ease-in 0.18s; } 

它的语法顺序是
过渡属性 完成时间 运动曲线 延迟时间
{ transition:property duration timing-function delay; }

    transition：all 3s linear 1s;
    all是所有属性
    也可以写transform
    例：transition：transform 3s linear 1s;
    中间用空格隔开

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

transform 属性效果

缩放，位移，旋转，倾斜

缩放transform：scale

放大缩小。
格式

     transform：scale(x,y);

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

位移 transform: translate

格式：
tramsform：translate（水平位移，垂直位移）
属性值：
px 正值：向右或向下。
百分比 是按照盒子本身的宽高。

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

      .box:hover{
            transform: translate(100px,-100px);
        }

旋转：transform：rotate

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

transform-origin: 变换原点

格式： transform-origin: 水平坐标 垂直坐标；
px ~ 百分比 ~ 按照盒子的宽高。50%=center
单词 left center等

transform 后面可以书写多个转换，但是书写顺序不同，效果不同。

transform: translate(100px) rotate(90deg);
  第一种会先位移，再旋转
  
transform:rotate(90deg) translate(100px) ;
 第二种会先旋转，再位移。

倾斜 transform：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表示旋转的角度。
rorateX，X轴旋转
rorateY，Y轴旋转
rorateZ Z轴旋转

形象讲：
x轴旋转是不停打滚
y轴旋转是不停转身
z轴旋转是大风车转

  .box:hover {
            /* transform: rotateX(180deg); */
            /* transform: rotateZ(180deg); */
            可以替换如下
            transform: rotate3D(1,1,1,180deg);
        }

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

位移 transform: translate3d(x,y,z);

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

transform: translate3d(x,y,z);

翻面隐藏

        backface-visibility: hidden;

3D呈现transform-style：persevere-3d

某个图形是由多个元素组成的。可以给这些元素的父元素添加一个transform-style：persevere-3d 来使其变成一个真正的3d图形。

perspective: 600px;设置屏幕和眼睛的距离
perspective 透视：

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

 .box{    
    transform-style: preserve-3d;
    transition: transform 3s;
    transform: rotateX(13deg) rotateY(0deg);
}