2016-02-12

CSS-3d变换

3D变换

transform:
rotate: 旋转
translate：位移
scale: 缩放

3d变换属性：

rotateX： 沿着x轴旋转
rotateY:  沿着y轴旋转
rotateZ:  沿着Z轴旋转
translateX: 沿着x轴移动
translateY: 沿着y轴移动
translateZ:  沿着Z轴移动 必须配合透视使用

透视： 近大远小
perspective ： 200px   设置的是用户的眼睛 和盒子的距离
添加给变换元素的父盒子

透视只是一种视觉上的呈现 ，并不是正确的3d效果

关于3d旋转方向的问题：

对着正方向去看：都是顺时针旋转的；

背面隐藏：
backface-visibility:hidden;

让子盒子保持真正的3d效果，需要给父盒子设置属性；
   <code>transform-style:preserve-3d;</code>

css3动画：

//jq  animate({},200,function(){})

css3中的动画： animation
使用方法和 js中 函数比较类似
1
2
3
4
5
6 //先定义
function say(){
    alert('abc');
}
在调用
say();

动画的定义

@keyframes 动画名称 {
        f
    orm{
          起始状态
        }
        to{
          结束状态
        }
    }
      @keyframes 动画名称 {
           0%{
            code
            }
            15%{
                code
            }
            50%{
                code
            }
            100%{
                code
            }
        }