css3 如何实现椭圆旋转

2025-04-28 21:06:21

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 如何实现椭圆旋转
声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢