今日动漫魔方!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
perspective: 1000px;
}
img {
width: 300px;
height: 300px;
vertical-align: top;
}
section {
position: relative;
margin: 200px auto;
width: 200px;
height: 300px;
transform-style: preserve-3d;
animation: m1 8s linear infinite;
}
section:hover {
animation-play-state: paused;
}
div {
position: absolute;
top: 0;
left: 0;
}
section div:first-child {
transform: translateZ(150px);
}
section div:nth-child(2) {
transform: rotateY(90deg) translateZ(150px);
}
section div:nth-child(3) {
transform: rotateY(180deg) translateZ(150px);
}
section div:nth-child(4) {
transform: rotateY(270deg) translateZ(150px);
}
section div:nth-child(5) {
transform: rotateX(90deg) translateZ(150px);
}
section div:nth-child(6) {
transform: rotateX(90deg) translateZ(-150px);
}
@keyframes m1 {
0% {}
100% {
transform: rotate3d(1, 1, 1, 360deg);
}
}
</style>
</head>
<body>
<section class="box">
<div><img src="../../../../图/006Zw1yCly1g79n6nbo2kj30hx0nfwfv.jpg" alt=""></div>
<div><img src="../../../../图/006Zw1yCly1g79n6ncgmej30mc0mjdii.jpg" alt=""></div>
<div><img src="../../../../图/006Zw1yCly1g79n6npz25j30hw0ncacc.jpg" alt=""></div>
<div><img src="../../../../图/006Zw1yCly1g79n6o5t8dj30hb0qeac0.jpg" alt=""></div>
<div><img src="../../../../图/006Zw1yCly1g79n6oczs0j30i80p3779.jpg" alt=""></div>
<div><img src="../../../../图/006Zw1yCly1g79n6ome56j30l90rsadv.jpg" alt=""></div>
</section>
</body>
</html> |
|