首页前端开发CSScss3 绕点旋转180

css3 绕点旋转180

时间2023-12-05 02:36:04发布访客分类CSS浏览633
导读:CSS3 绕点旋转 180 是一种常见的效果,在这里我们将详细讲解如何通过 CSS3 实现这个效果。首先,我们需要知道如何使用 CSS3 中的 transform 属性进行旋转。通过使用 transform-origin 属性,我们可以将旋...

CSS3 绕点旋转 180 是一种常见的效果,在这里我们将详细讲解如何通过 CSS3 实现这个效果。

首先,我们需要知道如何使用 CSS3 中的 transform 属性进行旋转。通过使用 transform-origin 属性,我们可以将旋转的中心点设置为图片中心,而不是默认的左上角。

img {
    transform: rotate(180deg);
    transform-origin: 50% 50%;
}

以上代码将会将图像绕中心点旋转 180 度,使其倒转。

接下来,我们将绕点旋转 180 度。在这个例子中,我们将使用一个圆圈作为参考点。

.circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    margin-top: -150px;
    margin-left: -150px;
    border: 1px solid black;
    border-radius: 50%;
}

以上代码将会创建一个半径为 150 像素的圆圈,并将其放置在屏幕的中心。

接下来,我们将使用 :before 和 :after 伪元素来创建两个半透明的遮罩层,从而实现绕点旋转 180 度的效果。

.circle:before,.circle:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 150px;
    margin-top: -75px;
    margin-left: -75px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
}
.circle:before {
    transform: rotateZ(-45deg);
}
.circle:after {
    transform: rotateZ(45deg);
}

以上代码将会创建两个透明度为 0.5 的遮罩层,并使用 rotateZ 属性将它们顺时针和逆时针旋转 45 度。

最后,我们将会利用 CSS3 的 z-index 属性将图片放在顶层,从而展示绕点旋转 180 的效果。

img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin-top: -50px;
    margin-left: -50px;
    transform: rotateZ(180deg);
    transform-origin: 50% 50%;
    z-index: 2;
}
    

以上代码将会将图像放在 z-index 为 2 的层级上,从而显示在遮罩层的上方。

通过使用以上代码,我们就可以实现绕点旋转 180 的效果了。

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!


若转载请注明出处: css3 绕点旋转180
本文地址: https://pptw.com/jishu/568479.html
css在背景图上再放一层背景图 css在背景中怎样设置渐变颜色

游客 回复需填写必要信息