<style>
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
/* background: radial-gradient(circle, #333, #000 50%); */
position: relative;
transform-style: preserve-3d;
/* perspective: 1000px; */
}
.box {
width: 500px;
height: 500px;
;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
/* border: 1px solid red; */
animation-name: rotate2;
animation-duration: 4s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
main {
width: 100px;
height: 100px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
transform-style: preserve-3d;
animation-name: rotate;
animation-duration: 4s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.quire2 {
margin-top: 400px;
}
@keyframes rotate {
0% {
transform: rotateY(0)
}
100% {
transform: rotateY(360deg)
}
}
@keyframes rotate2 {
0% {
transform: rotateZ(0)
}
100% {
transform: rotateZ(360deg)
}
}
.surface {
width: 100px;
height: 100px;
position: absolute;
left: 0;
top: 0;
opacity: 0.5;
box-shadow: 0 0 10px #fff;
font-size: 40PX;
color: white;
/* text-align: center; */
}
.top {
background-color: red;
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
background: orange;
transform: rotateX(-90deg) translateZ(50px);
}
.left {
background-color: yellow;
transform: rotatey(90deg) translateZ(-50px);
}
.right {
background-color: green;
transform: rotatey(-90deg) translateZ(-50px);
}
.front {
background-color: blue;
transform: translateZ(50px);
}
.back {
background-color: purple;
transform: translateZ(-50px) rotateX(180deg);
}
</style>
</head>
<body>
<div class="box">
<main>
<div class="surface top">1</div>
<div class="surface bottom">2</div>
<div class="surface left">3</div>
<div class="surface right">4</div>
<div class="surface front">5</div>
<div class="surface back">6</div>
</main>
<main class="quire2">
<div class="surface top">1</div>
<div class="surface bottom">2</div>
<div class="surface left">3</div>
<div class="surface right">4</div>
<div class="surface front">5</div>
<div class="surface back">6</div>
</main>
</div>
</body>
双方旋转
最新推荐文章于 2024-09-14 08:09:14 发布