CSS transform的rotate，内部元素旋转到背后仍会显示。

最新推荐文章于 2024-09-02 19:53:00 发布

cithegod

最新推荐文章于 2024-09-02 19:53:00 发布

阅读量6.9k

点赞数 1

分类专栏： CSS 文章标签： css css3

本文链接：https://blog.csdn.net/cithegod/article/details/53101781

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

在写代码的时候出现了一个问题，当使用了CSS3的transform的时候，对下面这个元素进行旋转：

//DOM元素的结构
<figure class="img-figure">
    <img src="/assets/97aa04cee801bdd3b8762057267d0767.jpg" alt="This is a beauty">
    <figcaption>
        <h2 class="img-title">
            This is a beauty
        </h2>
        <div class="img-back">
            <p>She is a member of SNH48.</p>
        </div>
    </figcaption>
</figure>

//LESS
.img-figure {
    position:absolute;
    box-sizing: border-box;
    transform-style: preserve-3d;
    transition: all .6s ease-in-out;
    &.is-inverse {
        transform: rotateY(180deg);
    }
    img {
        width: 240px;
        height: 240px;
    }
    figcaption {
        text-align: center;
        .img-title {
            margin: 20px 0 0 0;
        }
    }
    .img-back {
        position: relative;
        transform-style: preserve-3d;
        transform: rotateY(180deg);
        top: -150px;
    }
}

使用上面的LESS代码对figure元素进行旋转，但是这样的情况下，元素.img-title 和元素img 虽然会进行旋转，但是位置仍保持在可见位置：

旋转前：

这里写图片描述

旋转后：

这里写图片描述

可以看到figure 的内部元素是单独旋转了180度，并且脱离了父元素的旋转，显示了出来，这里需要将其隐藏，可以使用CSS属性backface-visibility 设置为hidden就可以使某个元素位于背面的时候隐藏起来。

//修改后的LESS代码
//LESS
.img-figure {
    position:absolute;
    box-sizing: border-box;
    transform-style: preserve-3d;
    transition: all .6s ease-in-out;
    &.is-inverse {
        transform: rotateY(180deg);
    }
    img {
        backface-visibility: hidden;
        width: 240px;
        height: 240px;
    }
    figcaption {
        text-align: center;
        .img-title {
            margin: 20px 0 0 0;
            backface-visibility: hidden;
        }
    }
    .img-back {
        position: relative;
        transform-style: preserve-3d;
        transform: rotateY(180deg);
        top: -150px;
    }
}

旋转后效果：

这里写图片描述