<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 300px;height: 300px;margin: 300px auto;perspective: 1800px;
}
ul{
text-align: center;list-style: none;line-height: 300px;position: relative;transform-style: preserve-3d;animation: mymove 2s linear infinite;transform-origin: center center 150px;
}
ul>li{
font-size: 50px;position: absolute;
}
li:nth-child(1) {
height: 300px;width:300px;background: pink;opacity: .5;
}
li:nth-child(2) {
height: 300px;width:300px;background: green;opacity: .5;transform: translateY(300px) rotateX(90deg);transform-origin: top;
}
li:nth-child(3) {
height: 300px;width:300px;background: yellow;opacity: .5;transform: translateX(-300px) rotateY(90deg); transform-origin: right;
}
li:nth-child(4) {
height: 300px;width:300px;background: blue;opacity: .5;transform: translateY(-300px) rotateX(-90deg) ;transform-origin: bottom;
}
li:nth-child(5) {
height: 300px;width:300px;background: red;opacity: .5;transform: translateX(300px) rotateY(-90deg);transform-origin: left;
}
li:nth-child(6) {
height: 300px;width:300px;background: yellowgreen;opacity: .5;transform: translateZ(300px);
}
@keyframes mymove{
from{
transform: rotateY(0deg);
}
to{
transform: rotateY(360deg);
}
}
</style>
</head>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
</html>