css3-3D特效

04 Oct 2014


  1. transition创建动画
  2. 创建简单的3D场景
    • perspective: 800;
    • perspective-origin: 50% 50%;
    • -webkit-transform-style: preserve-3d; transform: translate rotate;(X,Y,Z)
    • transform-origin 调整旋转中心;x轴(left,center,right);y轴(top,center,bottom);z轴(length px)
  3. 创建3D动画效果

rotateX: 0deg

rotateY: 0deg

rotateZ: 0deg

translateX: 0px

translateY: 0px

translateZ: 0px


创建3D动画效果

1
2
3
4
5
6