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中 函数比较类似
123456
//先定义function say(){ alert('abc');}在调用say();
动画的定义
|
|
调用的时候:
animation: 动画名称 持续时间;