css3 transform动画？css动画效果
这篇文章给大家聊聊关于css3 transform动画，以及css动画效果对应的知识点，希望对各位有所帮助，不要忘了收藏本站哦。
css3 实现动画效果,怎样使他无限循环动下去
一、实现CSS3无限循环动画代码示例。
代码如下：
CSS:
@-webkit-keyframes gogogo{
0%{
-webkit-transform: rotate(0deg);
border:5px solid red;
}
50%{
-webkit-transform: rotate(180deg);
background:black;
border:5px solid yellow;
}
100%{
-webkit-transform: rotate(360deg);
background:white;
border:5px solid red;
}
}
.loading{
border:5px solid black;
border-radius:40px;
width: 28px;
height: 188px;
-webkit-animation:gogogo 2s infinite linear;
margin:100px;
}
扩展资料实现动画无限循环所需要的CSS属性说明：
1、infinite
在animation后面加上infinite就可以无限循环，另外还可以做反向循环使用animation-direction
2、animation-name
规定需要绑定到选择器的 keyframe名称。
3、animation-duration
规定完成动画所花费的时间，以秒或毫秒计。
4、animation-timing-function
规定动画的速度曲线。
5、animation-delay
规定在动画开始之前的延迟。
6、animation-iteration-count
规定动画应该播放的次数。
7、animation-direction
规定是否应该轮流反向播放动画。
css3中怎样定义动画的旋转中心点
我们没有使用transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、移位、缩放等操作都是以元素自己中心（变形原点）位置进行变形的。但很多时候需要在不同的位置对元素进行变形操作，我们就可以使用transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。如果我们把元素变换原点（transform-origin）设置0（x） 0（y），这个时候元素的变换原点转换到元素的左顶角处。改变transform-origin属性的X轴和Y轴的值就可以重置元素变形原点位置，其基本语法如下所示:`transform-origin：[<percentage>|<length>| left| center| right| top| bottom]| [<percentage>|<length>| left| center| right]| [[<percentage>|<length>| left| center| right]&& [<percentage>|<length>| top| center| bottom]]<length>?`transform-origin属性值可以是百分比、em、px等具体的值，也可以是top、right、bottom、left和center这样的关键词。2D的变形中的transform-origin属性可以是一个参数值，也可以是两个参数值。如果是两个参数值时，第一值设置水平方向X轴的位置，第二个值是用来设置垂直方向Y轴的位置。3D的变形中的transform-origin属性还包括了Z轴的第三个值。其各个值的取值简单说明如下： x-offset：用来设置transform-origin水平方向X轴的偏移量，可以使用<length>和<percentage>值，同时也可以是正值（从中心点沿水平方向X轴向右偏移量），也可以是负值（从中心点沿水平方向X轴向左偏移量）。 offset-keyword：是top、right、bottom、left或center中的一个关键词，可以用来设置transform-origin的偏移量。 y-offset：用来设置transform-origin属性在垂直方向Y轴的偏移量，可以使用<length>和<percentage>值，同时可以是正值（从中心点沿垂直方向Y轴向下的偏移量），也可以是负值（从中心点沿垂直方向Y轴向上的偏移量）。 x-offset-keyword：是left、right或center中的一个关键词，可以用来设置transform-origin属性值在水平X轴的偏移量。 y-offset-keyword：是top、bottom或center中的一个关键词，可以用来设置transform-origin属性值在垂直方向Y轴的偏移量。 z-offset：用来设置3D变形中transform-origin远离用户眼睛视点的距离，默认值z=0，其取值可以<length>，不过<percentage>在这里将无效。
css3系列之transform 详解rotate
rotate
rotateX
rotateY
rotateZ
rotate3d
rotate：
旋转该元素，配合着transform-origin属性，transform-origin是设置旋转点的。(没有设置transform-origin属性也可以，只不过是根据该元素的中心点旋转，也就是center center)
加上 transform-origin设置旋转点。transform-origin是根据自己而定位的，所以 0px 0px就是左上角那个点。
rotateX：
讲这个之前呢，先普及一个知识，在transform里面，x y z轴，分别是什么样子的，他跟我们平常的 x和 y不太一样，因为，他是倒着的。 Z轴呢，在0那个位置，因为他是3D的，看下面的图，转个身就知道在那里了。
接下来，看看所谓的 Z轴是什么
rotateX的X呢，可以写成大写的，也可以写成小写的x，没有影响，这个属性呢，你加上rotateX之后，这个元素，就会以 X轴旋转，里面填的是角度。
这样看起来，好像不是那么直观，毕竟是2D的图，来给他加了3D的效果看看，(由于设置了 transform-origin：0 0，所以并不会在元素的中间旋转，而是以 0 0点的那条x轴旋转)
上面两个图，第一个图是在 2d的情况下观看的，第二个图是 3d的时候，是不是 3d看起来比较直观。
那么，接下来，加上Y一起使用，rotateX(45deg) rotateY(45deg)，这两个合在一起什么意思呢，这个元素，先按照 X轴，旋转45度，然后再按照Y轴，旋转45度，那么接下来的结果会是怎么样呢？
由于我设置的 transform-origin：center center；定的点在中心，那么两条轴，是会成这样子的。
然后，看下，结果，是不是如我们所示？
最后，加上rotateZ
rotate3D：
设置一条主轴，然后根据这条轴旋转
这个呢，可以设置4个参数，前三个是，x y z最后一个是角度deg但是，此 x y z，可不是上面那几个，不一样的。这三个值，设置的是矢量的方向，填什么无所谓，主要是比值很重要。举个例子 1，1，0，0deg那么就是 1：1：0= 100：100：0对吧，拿这个值来图解比较好。
关于css3 transform动画到此分享完毕，希望能帮助到您。