HTML制作两个扑克牌(扑克牌是图片),一张绕x轴旋转,另一张绕y轴旋转
时间: 2024-02-24 08:56:03 浏览: 35
可以使用CSS的transform属性对图片进行旋转,其中rotateX()函数可以绕x轴旋转,rotateY()函数可以绕y轴旋转。HTML代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>扑克牌旋转</title>
<style type="text/css">
.card {
width: 200px;
height: 300px;
position: relative;
perspective: 1000px;
margin: 50px auto;
}
.card img {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
}
.card .front {
transform: rotateY(0deg);
}
.card .back {
transform: rotateY(180deg);
}
.card:hover .front {
transform: rotateY(180deg);
}
.card:hover .back {
transform: rotateY(0deg);
}
.card-x {
transform-style: preserve-3d;
animation: rotateX 3s infinite linear;
}
.card-y {
transform-style: preserve-3d;
animation: rotateY 3s infinite linear;
}
@keyframes rotateX {
from {
transform: rotateX(0deg);
}
to {
transform: rotateX(360deg);
}
}
@keyframes rotateY {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="card card-x">
<img src="x.jpg" class="front">
<img src="y.jpg" class="back">
</div>
<div class="card card-y">
<img src="x.jpg" class="front">
<img src="y.jpg" class="back">
</div>
</body>
</html>
```
在上面的代码中,使用了CSS的transform属性和animation属性对图片进行旋转。其中,perspective属性可以使元素具有透视效果,transform-style属性可以控制子元素的transform属性是否继承父元素的透视效果。backface-visibility属性可以控制元素的背面是否可见,避免旋转时出现闪烁。通过:hover伪类,可以使鼠标悬停时触发旋转动画。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)