用html和css简单实现卡片反转效果效果展示代码演示相关的css属性 transform-style: prese

效果展示

QQ2024125-12588-HD -original-original.gif

代码演示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>卡片反转效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            height: 400px;
            width: 300px;
            position: relative;
            transition: transform 0.6s;
            transform-style: preserve-3d;
        }

        .box div {
            top: 0;
            left: 0;
            backface-visibility: hidden;
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .front {
            background-color: red;
        }

        .back {
            background-color: blue;
            transform: rotateY(180deg);
        }

        .flipped {
            transform: rotateY(180deg);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="front">
            <button>反转</button>
        </div>
        <div class="back">
            <button>反转</button>
        </div>
    </div>
    <script>
        var isReverse = false;
        let box = document.querySelector(".box");
        let buttons = document.querySelectorAll("button");
        buttons.forEach(function (button) {
            button.addEventListener("click", function () {
                if (isReverse) {
                    box.classList.remove("flipped");
                } else {
                    box.classList.add("flipped");
                }
                isReverse = !isReverse;
            });
        });
    </script>
</body>

</html>

相关的css属性

transform-style: preserve-3d;

transform-style: preserve-3d 是 CSS 中的一个属性，用于控制元素的子元素是否在三维空间中进行变换。它决定了子元素的变换是相对于父元素的平面进行（flat）还是相对于三维空间进行（preserve-3d）。

属性值

flat：默认值。子元素的变换是相对于父元素的平面进行的，即子元素的变换不会在三维空间中进行。
preserve-3d：子元素的变换是在三维空间中进行的，即子元素的变换会保留三维空间中的深度关系。

示例

假设你有一个父元素和一个子元素，并且你希望在三维空间中对子元素进行变换：

<div class="parent">
    <div class="child"></div>
</div>

.parent {
    width: 200px;
    height: 200px;
    position: relative;
    transform-style: preserve-3d;
}

.child {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50px;
    left: 50px;
    background-color: red;
    transform: rotateY(45deg);
}

在这个例子中，.parent 元素设置了 transform-style: preserve-3d，这意味着 .child 元素的 rotateY(45deg) 变换是在三维空间中进行的。如果没有设置 transform-style: preserve-3d，.child 元素的变换将相对于 .parent 元素的平面进行，效果会有所不同。

关键点

preserve-3d：允许子元素在三维空间中进行变换，保留深度关系。
flat：子元素的变换是相对于父元素的平面进行的，不会保留三维空间中的深度关系。

使用场景

3D 变换：当你需要在三维空间中对元素进行复杂的变换时，使用 transform-style: preserve-3d 可以确保子元素的变换在三维空间中正确进行。
卡片翻转效果：在实现卡片翻转效果时，通常会使用 transform-style: preserve-3d 来确保前后两面的翻转效果在三维空间中正确显示。

总结

transform-style: preserve-3d 是一个重要的 CSS 属性，用于控制元素的子元素是否在三维空间中进行变换。它对于实现复杂的三维变换效果非常有用，特别是在需要保留深度关系的情况下。

backface-visibility: hidden;

backface-visibility: hidden 是 CSS 中的一个属性，用于控制元素的背面在三维变换时是否可见。这个属性通常用于实现一些视觉效果，比如卡片翻转效果。

属性值

visible：默认值。元素的背面在三维变换时是可见的。
hidden：元素的背面在三维变换时是不可见的。

示例

假设你有一个卡片，正面和背面分别有两个不同的内容，你希望在卡片翻转时只显示正面或背面：

<div class="card">
    <div class="front">正面内容</div>
    <div class="back">背面内容</div>
</div>

.card {
    width: 200px;
    height: 200px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

.card div {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden;
}

.front {
    background-color: red;
}

.back {
    background-color: blue;
    transform: rotateY(180deg);
}

.card.flipped {
    transform: rotateY(180deg);
}

在这个例子中，.card 元素包含两个子元素：.front 和 .back。.front 是卡片的正面，.back 是卡片的背面。通过设置 backface-visibility: hidden，我们确保在卡片翻转时，正面和背面的内容不会互相干扰。

关键点

visible：元素的背面在三维变换时是可见的。
hidden：元素的背面在三维变换时是不可见的。

使用场景

卡片翻转效果：在实现卡片翻转效果时，通常会使用 backface-visibility: hidden 来确保正面和背面的内容在翻转时不会互相干扰。
3D 变换：在复杂的 3D 变换中，使用 backface-visibility: hidden 可以避免背面内容在不应该显示的时候出现。

总结

backface-visibility: hidden 是一个非常有用的 CSS 属性，特别是在实现卡片翻转效果时。它确保元素的背面在三维变换时不可见，从而避免了一些视觉上的干扰。