手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

css3 如何实现椭圆旋转

时间:2024-10-12 09:01:11

1、新建一个html5文档,完成基本代码编写。

css3 如何实现椭圆旋转

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

css3 如何实现椭圆旋转

3、先看下图层网页显示效果,如下。

css3 如何实现椭圆旋转

4、通过“border-radius:50%/50%”属性将长方形图层设置成一个椭圆形。

css3 如何实现椭圆旋转

5、我们用用浏览器刷新下页面,页面效果如下。

css3 如何实现椭圆旋转

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

css3 如何实现椭圆旋转

7、这样我们就实现了用css3将椭圆旋转。

css3 如何实现椭圆旋转
© 手抄报圈