html制作两张扑克牌(扑克牌是图片),一张绕x轴旋转,一张绕y轴旋转
时间: 2024-02-24 21:55:45 浏览: 144
好的,下面是HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>旋转扑克牌</title>
<style>
.card {
width: 100px;
height: 150px;
position: relative;
perspective: 800px;
margin: 50px;
}
.card .front, .card .back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
box-sizing: border-box;
transform-style: preserve-3d;
border: 1px solid black;
padding: 10px;
font-size: 24px;
text-align: center;
line-height: 130px;
}
.card .front img, .card .back img {
width: 100%;
height: 100%;
object-fit: contain;
}
.card .front {
transform: rotateX(0deg);
z-index: 2;
}
.card .back {
transform: rotateY(180deg);
z-index: 1;
}
.card.rotate-x {
animation: rotate-x 2s infinite alternate;
}
.card.rotate-y {
animation: rotate-y 2s infinite alternate;
}
@keyframes rotate-x {
from {
transform: rotateX(0deg);
}
to {
transform: rotateX(360deg);
}
}
@keyframes rotate-y {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="card rotate-x">
<div class="front">
<img src="spades.png" alt="A♠">
</div>
<div class="back">
<img src="back.png" alt="背面">
</div>
</div>
<div class="card rotate-y">
<div class="front">
<img src="hearts.png" alt="K♥">
</div>
<div class="back">
<img src="back.png" alt="背面">
</div>
</div>
</body>
</html>
```
解释一下代码:
1. 首先定义了一个名为 `.card` 的样式,表示扑克牌。设置了宽度、高度、相对定位、透视距离等属性。
2. `.card` 中有两个子元素,分别是 `.front` 和 `.back`,表示扑克牌的正面和背面。设置了绝对定位、宽度、高度、背面可见性、盒子模型、3D变换等属性。
3. `.front` 和 `.back` 中的 `img` 标签用来显示扑克牌的图片。设置了宽度、高度、对象适应等属性。
4. `.front` 和 `.back` 的 `transform` 属性分别设置了绕 X 轴和 Y 轴旋转的角度。
5. `.card.rotate-x` 和 `.card.rotate-y` 分别表示绕 X 轴和 Y 轴旋转的动画。使用了 `@keyframes` 关键字定义动画。动画的名称为 `rotate-x` 和 `rotate-y`,分别设置了起始和结束状态的 `transform` 属性。
6. 在 HTML 中创建了两个 `.card` 元素,一个使用了 `.rotate-x` 类,一个使用了 `.rotate-y` 类,分别表示绕 X 轴和 Y 轴旋转的扑克牌。
注意,为了让旋转效果更明显,我们在 `.card` 中设置了边框和内边距。如果不需要边框和内边距,可以将这两个属性去掉。同时,需要将图片文件的路径修改为实际的路径。
阅读全文