CSS3 动画3D视角下 旋转圆环

首先是  transform 属性：

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

加上对应属性则可得到3D透视效果下的形态

本次以圆形（或图片）元素为例：

1. 父元素添加属性

#app{

    width:200px;

    height:200px;

    position: absolute;

    transform:  rotateZ(90deg) rotateX(0deg) rotateY(70deg); /**添加透视3d属性/

   /* rotateZ(90deg) 使元素沿Z轴旋转90度 可以简单理解为放平*/

}

 

rotateZ 60deg

 

 rotateX它可以让一个元素围绕横坐标(水平轴)旋转,

 rotateY(70deg) 让元素绕y轴旋转 

注意:如果单独使用某个属性与同时使用某个属性效果会不同

2.子元素使用animation定义动画

img{

    width:200px;

    height:200px;

    position:relative;

    animation:3s myrotate linear infinite normal; /*动画名称 动画时间 动画速度 动画延迟 */

}

3.定义@keyframes动画规则

旋转

@keyframes myrotate{

    0% {

      transform :rotateZ(0deg);

    }

    100% {

      transform :rotateZ(360deg);

    }

} 

移动

@keyframes mymove{

from {

  transform :translate(0%);

}

to {

  transform :translate(100%);

}

} 

备注：

scale 缩放
rotate 旋转
skew倾斜
translate 移动

 

animation 与Transition不同的是：
1.Animation可以通过keyframe显示控制当前帧的属性值，而Transition只能隐式来进行（不能指定每帧的属性值），所以相对而言Animation的功能更加灵活。
2. Animation通过模拟属性值改变来实现动画，动画结束之后元素的属性没有变化；而Transiton确实改变了元素的属性值，动画结束之后元素的属性发生了变化；这一点，这在实际应用中会产生很大的区别。