效果展示
代码演示
<!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 属性，特别是在实现卡片翻转效果时。它确保元素的背面在三维变换时不可见，从而避免了一些视觉上的干扰。
