css3自动转动，css3动画旋转属性

css3中怎样定义动画的旋转中心点

我们没有使用transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、移位、缩放等操作都是以元素自己中心（变形原点）位置进行变形的。

首先新建一个html5文档，完成基本代码编写，如下图所示。然后新建一个长100像素，高50像素背景为红色的长方形图层。接着通过输入“border-radius：50%/50%”属性，如下图所示，将长方形图层设置成一个椭圆形。

使用transform-origin设置css3旋转中心，分别有两个参数，代表x和y轴的位置。旋转参考的零点：元素左上角的位置或者说盒子模型的左上角。

相关问答

Q1: CSS3中如何使元素曲线运动

1、/* Opera */}CSS3 转换。通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。

2、ease：默认。动画以低速开始，然后加快，在结束前变慢。ease-in：动画以低速开始。ease-out：动画以低速结束。ease-in-out：动画以低速开始和结束。cubic-bezier(n，n，n，n)：在 cubic-bezier 函数中自己的值。

3、可以做一个animation，举一个例子，让一个元素在某一个范围之内，左距离和上距离同时改变。

Q2: CSS3动画中怎么一边移动一边旋转?

在动画帧时加入rotate(角度)就可以旋转并移动，可以参考下面代码。

首先新建一个html空白文档，取名字叫做css3动画，保存一下。然后写html结构，只需要一个div元素即可，class名字叫做img 设置其边框为不同的颜色，边框宽度设置成100px。

鼠标悬停，图标会一直不停旋转。 如果实现图标一直不停旋转，则需要使用animation动画。先制作动画的各个关键帧，然后在图标中运用这一动画。

当animate1执行完后，把这个class去掉，换成animate2。其中animate1的执行时间，刚好是js定时器的时间。当然这里有个问题，js定时的时间不一定会非常的吻合css的动画时间，你可以根据情况作出适当的时间调整。

关于css3自动转动和css3动画旋转属性的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。