css 3d 动画 相关

标签：

transform-style: preserve-3d; 设置3D模式

perspective：700px ；属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身

perspective-origin：50% 50% ；属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。当为元素定义 perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身。

设置动画
@keyframes mymove

{
0%   {top:0px;}
25%  {top:200px;}
50%  {top:100px;}
75%  {top:200px;}
100% {top:0px;}
}

div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite; 绑定上面设置好的动画  时间 infinite规定动画应该无限次播放
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
}

animation-timing-function 使用名为三次贝塞尔（Cubic Bezier）函数的数学函数，来生成速度曲线。您能够在该函数中使用自己的值，也可以预定义的值：

css 3d 动画 相关

标签：

原文地址：http://www.cnblogs.com/masterccc/p/4637780.html