3d旋转:
rotateZ();
rotate3d(x,y,z,度数)
注:x y z一个矢量值 0 不旋转 1 旋转
eg:rotate3d(1,1,0,45deg)
等价于:rotateX(45deg) rotateY(45deg)
-->
<!--
3d-缩放:
scaleZ()
scale3d(x,y,z)
-->
<!--
让背面不可见:
backface-visibility:hidden;
-->
<!--
横看成岭侧成峰,远近高低各不同
不识庐山真面目,只缘身在此山中
会当凌绝顶,一览众山小
近大远小->景深
perspective景深: 值越大距离越远 ( 给父元素添加 )
-->
<!--
perspective:500px; 900 - 1200
景深的视角:
perspective-origin:
中间:center
左上角: left top
right top
10px 10px
-->
<!--
css3 -动画!
1:制作关键帧
@keyframes动画名称{
/*开始*/
from{
left:0;
}
/*结束*/
to{
left:500px;
}
}
@keyframes动画名称{
0%{
}
//中间可以添加任意关键帧
20%{
}
50%{
}
70%{
}
100%{
}
}
2:调用关键帧:
简写方式:
animation:
动画的名称
动画的时间
延迟时间
动画的类型
动画循环的次数(无限循环:infinite)
动画运动的方向(reverse alternate[先正后反] alternate-reverse[先反后正])
运动的状态:animation-plat-state : running paused(暂停)
动画停止的状态: animation-fill-mode:forwards (停在最后一帧);
动画的类型:
linear匀速
ease默认值
step-start:马上跳到动画每一结束桢的状态
-->
<!--
transition和 animation的区别:
transition需要事件触发(例如:鼠标滑过)
animation:自动触发
-->