元素旋转，变形中心点，背面可见，图片翻面，animation动画，

默认沿Z轴旋转

transform: rotate(45deg);

沿X轴旋转

transform: rotateX(45deg);

沿Y轴旋转

transform: rotateY(45deg);

设置3d的样式按3d空间显示

transform-style:preserve-3d;

变形中心点

一共有三个div块

div{

   width:200px;

   height:200px;

   background-color:gold;

   float:left;

   margin:30px;

   transition:all 500ms ease;

}

背面可见

box是con的子元素

.con{

   width:300px;

   height:300px;

   margin:50px auto 0;（当con设置了box不设置）

   border:1px solid black;

}

.box{

   width:300px;

   height:300px;

   background-color:gold;

垂直居中

text-align:center;

line-height:300px;

font-size:50px;

  盒子居中

margin: 50px auto 0;

transition:all 500ms ease;

按照3d空间的效果显示

transform-style:preserve-3d;

设置透视距离符合人眼 初始值

   transform:perspective(800px) rotateY(0deg);

图片翻面

pic 和 info 是con的子元素

pic和info是兄弟元素

.con{

   width:666px;

   height:666px;

   margin:100px auto 0;

  相对定位

   position:relative;

   transform-style:preserve-3d;

   transform:perspective(800px) rotateY(0deg);

}

.pic, .info{

   width:666px;

   height:666px;

  绝对定位

   position:absolute;

 原点设置为00

   left:0;

   top:0;

}

.info{

   background-color:gold;

   text-align:center;

   line-height:666px;

  translate 沿着Z轴浮起来2个位移 位移

   transform:translateZ(2px) rotateY(180deg);

  背面隐藏

   backface-visibility:hidden;

}

@keyframes 定义关键帧动画

animation-name 动画名称

animation-duration 动画时间

animation-duration      动画时间

animation-timing-function 动画曲线

linear          匀速

ease             开始和结束是慢速

ease -in        开始时是慢速

easa-out           结束时慢速

ease-in-out       开始和结束时慢速

steps       动画步数

animation-delay       动画延迟

animation-iteration-count   动画播放次数 nlinfinite

7、animation-direction 

normal  默认动画结束不返回 

Alternate 动画结束后返回 

8、animation-play-state  动画状态 

paused 停止

running  运动

9、animation-fill-mode 动画前后的状态 

none  不改变默认行为 

forwards  当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）

backwards  在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义） 

both  向前和向后填充模式都被应用

10、animation:name  duration  timing-function  delay  iteration-count  direction;同时设置多个属性