css3 卡牌旋转 |css内边距自适应

下面是一个简单的 CSS3 卡牌旋转的例子：

.card {
width: 200px;
height: 280px;
position: relative;
margin: 50px auto;
}
.card-front,
.card-back {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
}
.card-front {
background-color: #e74c3c;
}
.card-back {
background-color: #27ae60;
transform: rotateY(180deg);
}
.card-flip {
transition: 0.6s ease-out;
transform-style: preserve-3d;
}
.card-flip.flipped {
transform: rotateY(180deg);
}

大家可以使用一个 div 容器来包含两个 div 元素，这两个 div 元素分别代表卡牌的正面和背面。大家还需要添加一个名为 .card-flip 的类来实现翻转效果，类名前面的 . 符号表示这个类是一个 CSS 类。

接着，大家可以为 .card 类设置一些样式，如宽度、高度、位置等，然后为 .card-front 和 .card-back 元素设置宽度、高度、位置、position（绝对定位）和 backface-visibility（可以隐藏旋转时卡牌的背面）。

接下来，大家为卡牌的正面和背面分别设置不同的背景颜色，以及在 .card-back 中添加 transform: rotateY(180deg)，让卡牌在翻转时呈现出正确的背面。

最后，大家为 .card-flip 添加 transition、transform-style 和 transform 样式，用于翻转时的过渡效果和 3D 转换。同时，大家还要在 .card-flip 中添加 .flipped 类，用于翻转时的状态切换。

经过以上的代码设置，大家的卡牌旋转效果就完成了。大家可以为 .card 元素添加 .card-flip 类，即可实现卡牌的翻转效果。可以在实际的网页中应用该效果，让你的网页变得更加生动、有趣。