css中把图片变成椭圆后旋转

发表于前端技术学习版块 css,教程

CSS中的图片椭圆和旋转都是非常实用的效果，它们可以使你的网站更加美观、有趣。 /* 把图片变成椭圆 */ img { border-radius: 50%; } 使用border-radius属性来

CSS中的图片椭圆和旋转都是非常实用的效果，它们可以使你的网站更加美观、有趣。

 /* 把图片变成椭圆 */
    img {
        border-radius: 50%;
    }

使用border-radius属性来实现图片椭圆的效果，其中50%的值表示两条半径的长度相等，并且与边框相切，形成一个圆形或者椭圆形。接下来，我们再来看一下如何把图片旋转。

 /* 把图片变成椭圆并旋转 */
    img {
        border-radius: 50%;
        transform: rotate(45deg);
    }

使用transform属性来实现图片旋转，其中rotate函数里面的角度值可以调整旋转的角度大小，单位是deg（度）。通过组合border-radius和transform两个属性，我们可以将图片变为一个既有趣又美观的椭圆形，并且可以随意旋转。以下是完整的代码示例：

 <!DOCTYPE html>
    <html>
    <head>
        <title>图片椭圆效果</title>
        <style>
            img {
                width: 300px;
                height: 300px;
                border-radius: 50%;
                transform: rotate(45deg);
            }
        </style>
    </head>
    <body>
        <img src="https://picsum.photos/300">
    </body>
    </html>

在这个示例中，我们用了一个300*300像素的图片作为演示，你可以自行更改它的大小或者使用其它的图片。以上就是CSS中把图片变成椭圆并旋转的具体实现方法，希望能对大家有所帮助。

文章说明:

本文原创发布于探乎站长论坛，未经许可，禁止转载。

题图来自Unsplash，基于CC0协议。

该文观点仅代表作者本人，探乎站长论坛平台仅提供信息存储空间服务。