Css3 3D转换

2D空间和3D空间

　　2D：x 、y

　　3D：x、y、z

可以使用transform属性将HTML元素在3D空间内

一个就简单的例子

<div>
    <img src="lufei.jpg">
</div>



@-webkit-keyframes rotate{
  100%{transform:rotate(60deg);}
}

img{
  -webkit-animation-name:rotate;
  -webkit-animation-durction:2s;
}

这样的话  图片只是变扁了，看不到透视效果，想要看到透视效果需要在父元素上加上perspective属性，也就是说把这个div看作一个3D画面

perspective：1000px；   视点和3D画面的距离，距离越小透视就越明显。

<div>
    <img src="lufei.jpg">
</div>

div{
  perspevtive:500px;
}

@-webkit-keyframes rotate{
  100%{transform:rotate(60deg);}
}

img{
  -webkit-animation-name:rotate;
  -webkit-animation-durction:2s;
}

 

perspective-origin：right top；改变视点的位置

<div>
    <img src="lufei.jpg">
</div>

div{
  perspevtive:500px;
  perspective-origin:right top;
}

@-webkit-keyframes rotate{
  100%{transform:rotate(60deg);}
}

img{
  -webkit-animation-name:rotate;
  -webkit-animation-durction:2s;
}

transform-origin;x y z; 旋转的基准点

<div>
    <img src="lufei.jpg">
</div>

div{
  perspevtive:500px;
}

@-webkit-keyframes rotate{
  100%{transform:rotate(60deg);}
}

img{
  -webkit-animation-name:rotate;
  -webkit-animation-durction:2s;
  transform-origin:center center 100px;
}

backface-visibility:设置元素背面是否可见，默认visible

<div>
    <img src="lufei.jpg">
</div>

div{
  perspevtive:500px;
}

@-webkit-keyframes rotate{
  100%{transform:rotate(60deg);}
}

img{
  -webkit-animation-name:rotate;
  -webkit-animation-durction:2s;
  transform-origin:center center 100px;
  backface-visibility：hidden；     背面隐藏
}

3D旋转（rotate3D）

rotate3D（1，1，1，360deg）；

　　前三个参数是在3维空间中的一个点x轴1，y轴1 z轴1 ，后面的360deg是围绕这个这个点360°旋转

3D移动（translate3D）

3D缩放（scale3D）

transform-style：

　　flat：默认值，子元素将不保留其3D位置

　　preserver-3D：子元素将保留其3D位置。