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

html-css011

css3中怎样定义动画的旋转中心点,第1张

1、首先新建一个html5文档，完成基本代码编写，如下图所示。

2、然后新建一个长100像素，高50像素背景为红色的长方形图层。

3、接着通过输入“border-radius:50%/50%”属性，如下图所示，将长方形图层设置成一个椭圆形。

4、接下来就是将椭圆旋转了，用“transform:rotate(30deg)”将椭圆旋转30度。

5、这样就实现了用css3将椭圆旋转，如下图所示预览即完成了。

CSS transform中的rotate的旋转中心设置参考下面方法：

transform-origin:50% 50% 设置旋转中心为元素中心。

transform-origin:0% 0% 设置旋转中心为元素左上角。

transform-origin:100% 100% 设置旋转中心为元素右下角。