HTML+CSS：王者翻转框

效果演示

实现了一个3D翻转卡片的效果，当鼠标悬停在卡片上时，卡片会从正面朝向翻转，从而实现3D效果。其中，卡片的正面和背面分别由一个div元素表示，通过CSS的transform属性实现3D效果。当鼠标悬停在卡片上时，通过CSS的hover属性实现翻转效果。

Code

<div class="card">
    <div class="front ">
        <p>快来和妲己一起玩耍吧~p>
    div>
    <div class="back">
        <div class="hero threeD">
            <h2>妲己h2>
            <div>
                <span>法师span>
                <span>刺客span>
                <span>辅助span>
            div>
        div>
        <div class="desc threeD">
            妲己，原型是商纣王宠妃妲己。职业法师，拥有先手控制敌人，技能范围广、射程够长，而且在后期超高爆发的特长。主流玩法是蹲草丛，打完就跑，二技能先手控制，然后接大招，最后一技能伤害最大化。
        div>
    div>
div>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #e8e8e8;
    overflow: hidden;
}
.card {
    width: 300px;
    height: 400px;
    position: relative;
}

.card .front::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 80px;
    top: 55%;
    background: rgba(0, 0, 0, 0.45);
    transform: translate3d(-50%, -50%, 20px);
    backface-visibility: hidden;
}

.card .front,
.card .back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transition: transform 4s;
    border-radius: 15px;
}

.card .front {
    z-index: 2;
    background: url(./img/封面.png);
    background-size: cover;
}

.card .front p {
    font-size: 15px;
    position: absolute;
    width: 400px;
    top: 55%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) translateZ(60px);
    backface-visibility: hidden;
    color: #fff;
}

.card .back {
    z-index: 1;
    background: #191e25;
    transform: rotateY(180deg);
    padding: 20px;
}

.card .back .hero {
    width: 250px;
    border-bottom: 2px solid #b49758;
    color: #fff;
    text-align: left;
    padding-bottom: 15px;
}

.card .back .hero h2 {
    color: #f8fae4;
    font-weight: 400;
    margin-bottom: 10px;
}

.card .back span {
    display: inline-block;
    width: 40px;
    height: 25px;
    text-align: center;
    background-color: #c09f5a;
    line-height: 25px;
    border-radius: 2px;
    color: #191d20;
    font-weight: bold;
}

.card .back .desc {
    text-indent: 2em;
    font-size: 18px;
    color: #fff;
    text-align: left;
    line-height: 30px;
    padding: 15px 5px;
    letter-spacing: 2px;
}

.card:hover .front {
    transform: rotateY(-180deg);
}

.card:hover .back {
    transform: rotateY(0deg);
}

.threeD {
    transform: translateZ(60px);
}

实现思路拆分

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

这段代码是设置全局样式，将所有元素的外边距、内边距和盒模型设置为0，从而实现更好的布局和响应式设计。

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #e8e8e8;
  overflow: hidden;
}

这段代码是设置页面的基本样式，包括高度、水平居中、垂直居中、垂直方向为列方向、背景颜色和溢出隐藏。

.card {
  width: 300px;
  height: 400px;
  position: relative;
}

这段代码是设置卡片的基本样式，包括宽度、高度、相对定位。

.card.front::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 80px;
  top: 55%;
  background: rgba(0, 0, 0, 0.45);
  transform: translate3d(-50%, -50%, 20px);
  backface-visibility: hidden;
}

这段代码是设置卡片正面的::before伪元素，用于添加一个黑色半透明的背景，并将其定位在正面上方。

.card.front,
.card.back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 4s;
  border-radius: 15px;
}

这段代码是设置卡片正面和背面的样式，包括相对定位、宽度、高度、文本居中、3D变换、背面可见性、过渡效果和圆角。

.card.front {
  z-index: 2;
  background: url(./img/封面.png);
  background-size: cover;
}

这段代码是设置卡片正面的样式，包括z-index、背景图片和背景图片大小。

.card.front p {
  font-size: 15px;
  position: absolute;
  width: 400px;
  top: 55%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) translateZ(60px);
  backface-visibility: hidden;
  color: #fff;
}

这段代码是设置卡片正面中的文字样式，包括字体大小、相对定位、宽度、垂直居中、水平居中、3D变换、背面可见性和颜色。

.card.back {
  z-index: 1;
  background: #191e25;
  transform: rotateY(180deg);
  padding: 20px;
}

这段代码是设置卡片背面的样式，包括z-index、背景颜色、3D变换和内边距。

.card.back.hero {
  width: 250px;
  border-bottom: 2px solid #b49758;
  color: #fff;
  text-align: left;
  padding-bottom: 15px;
}

这段代码是设置卡片背面中的标题样式，包括宽度、下边框、颜色、文本居左、下内边距。

.card.back.hero h2 {
  color: #f8fae4;
  font-weight: 400;
  margin-bottom: 10px;
}

这段代码是设置卡片背面中的标题文字样式，包括颜色、字体粗细和下边距。

j.card.back span {
  display: inline-block;
  width: 40px;
  height: 25px;
  text-align: center;
  background-color: #c09f5a;
  line-height: 25px;
  border-radius: 2px;
  color: #191d20;
  font-weight: bold;
}

这段代码是设置卡片背面中的标签样式，包括显示方式、宽度、高度、文本居中、背景颜色、行高、圆角、颜色和字体粗细。

.card.back.desc {
  text-indent: 2em;
  font-size: 18px;
  color: #fff;
  text-align: left;
  line-height: 30px;
  padding: 15px 5px;
  letter-spacing: 2px;
}

这段代码是设置卡片背面中的描述样式，包括缩进、字体大小、颜色、文本居左、行高、内边距和字母间距。

.card:hover.front {
  transform: rotateY(-180deg);
}

这段代码是设置鼠标悬停在卡片上时，卡片正面旋转180度的样式，通过CSS的hover属性实现。

.card:hover.back {
  transform: rotateY(0deg);
}

这段代码是设置鼠标悬停在卡片上时，卡片背面旋转0度的样式，通过CSS的hover属性实现。

.threeD {
  transform: translateZ(60px);
}

这段代码是设置卡片正面和背面的3D效果，通过CSS的transform属性实现，将卡片正面和背面分别放在一个平面上，通过translateZ属性将背面向内移动60px，从而实现3D效果。