css3 绕点旋转180

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核实处理，我们将尽快回复您，谢谢合作！