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

元素旋转

初始值
变形 透视距离800符合人眼的透视效果

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

默认沿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;

}

/*沿着左中*/

div:nth-child(1){

  transform-origin:left center;

}

/*沿着左上*/

div:nth-child(2){

  transform-origin:left top;

}

      /*沿着左上*/

div:nth-child(3){

  transform-origin:50px 50px;

}

div:hover{

  /*rotate 旋转 负值是逆时针旋转*/

  transform:rotate(-90deg);

}

背面可见

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);

背面隐藏

backface-visibility:hidden;

}

鼠标移入时沿着Y轴旋转

.con:hover .box{

transform:rotateY(180deg);

}

图片翻面

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;

}

animation动画

.box{

      width:100px;

      height:100px;

      background-color:gold;

      /*设置次数 6， 或者infinite无数次 ，alternate原路返回， both起始， forwords 动画停留在最后一帧 ，backwords 动画显示之前就从from开始，第一个1s是动画播放时间，第二个1s 是指延迟时间*/

      animation:moving 1s ease 1s 6 alternate both ;

播放状态 paused 是暂停

      animation-play-state:paused;

}

  .box:hover{

播放状态 running是运动

      animation-play-state:running;

}

定义动画的关键字keyframes

  @keyframes moving{

      from开始  to结束

   from{

        width:200px;

}

to{

        width:500px;

}

}

人物走路动画

.box{

  width:120px;

  height:182px;

  border:1px solid #000;

  margin:50px auto 0;

  overflow 隐藏溢出的

  overflow:hidden;

  相对定位 子元素要参照父元素定位

  position:relative;

}

.box img{

绝对定位 子元素参照父元素的定位 定位

  position:absolute;

  left:0;

  top:0;

  animation:walking 1s steps(8) infinite ;

}

@keyframes walking{

from{

      left:0;

}

to{

      left:-960px;

}

}