该HTML/CSS代码示例展示了如何创建一个3D旋转墙，墙上的每个面都显示同一辆汽车的不同角度。通过CSS变换属性实现各个面的旋转和定位，以及使用动画使墙整体旋转，创建出动态展示效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
perspective: 3000px;
}
.wrap{
width: 200px;
height: 300px;
/* border: 1px solid red; */
position: relative;
margin: 200px auto;
transform-style: preserve-3d;
/* transform: rotateZ(10deg) rotateX(55deg) rotateY(57deg); */
animation: run 10s linear infinite ;
}
.wrap div{
width: 200px;
height: 300px;
border: 1px solid red;
position: absolute;
top: 0;
left: 0;
font-size: 40px;
line-height: 300px;
text-align: center;
}
.wrap div:nth-child(1){
transform: rotateY(45deg) translateZ(500px);
background-image: url(./cts-car.png);
}
.wrap div:nth-child(2){
transform: rotateY(90deg) translateZ(500px);
background-image: url(./cts-car.png);
}
.wrap div:nth-child(3){
transform: rotateY(135deg) translateZ(500px);
background-image: url(./cts-car.png);
}
.wrap div:nth-child(4){
transform: rotateY(180deg) translateZ(500px);
background-image: url(./cts-car.png);
}
.wrap div:nth-child(5){
transform: rotateY(225deg) translateZ(500px);
background-image: url(./cts-car.png);
}
.wrap div:nth-child(6){
transform: rotateY(270deg) translateZ(500px);
background-image: url(./cts-car.png);
}
.wrap div:nth-child(7){
transform: rotateY(315deg) translateZ(500px);
background-image: url(./cts-car.png);
}
.wrap div:nth-child(8){
transform: rotateY(360deg) translateZ(500px);
background-image: url(./cts-car.png);
}
@keyframes run {
0%{
transform: rotateY(0deg);
}
100%{
transform: rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="wrap">
<div>8</div>
<div>7</div>
<div>6</div>
<div>5</div>
<div>4</div>
<div>3</div>
<div>2</div>
<div>1</div>
</div>
</body>
</html>
扫一扫
1302
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
