#盒子3D旋转
运用transform+transition:
- 第一种
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 200px;
margin: 200px;
}
.box ul {
list-style: none;
width: 100%;
height: 100%;
/* perspective: 880px; */
transform-style: preserve-3d;
transition: all 10s ease;
}
.box ul li {
width: 200px;
height: 200px;
background: rgba(255, 0, 0, .8);
font-size: 80px;
color: #fff;
text-align: center;
line-height: 200px;
position: absolute;
}
.box ul li.font {
background: rgba(50, 102, 50, 0.5);
/* transform: translateZ(200px);也可设置为100px,后设置为-100px */
z-index: 12;
}
.box ul li.back {
background: rgba(0, 0, 255, .8);
transform: translateZ(-200px);
z-index: 10;
}
.box ul li.up {
background: rgba(255, 0, 0, .8);
/* transform: translateY(-200px); */
transform-origin: bottom center;
transform: translateY(-200px) rotateX(90deg);
}
.box ul li.down {
background: rgba(255, 255, 0, .8);
/* transform: translateY(200px); */
transform-origin: top center;
transform: translateY(200px) rotateX(-90deg);
}
.box ul li.left {
background: rgba(255, 0, 255, .8);
/* transform: translateX(-200px); */
transform-origin: right center;
transform: translateX(-200px) rotateY(-90deg);
}
.box ul li.right {
background: rgba(0, 255, 255, .8);
/* transform: translateX(200px); */
transform-origin: left center;
transform: translateX(200px) rotateY(90deg);
}
.box:hover ul{
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="font">前</li>
<li class="back">后</li>
<li class="up">上</li>
<li class="down">下</li>
<li class="left">左</li>
<li class="right">右</li>
</ul>
</div>
</body>
</html>
- 第二种
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 200px;
margin: 200px;
}
.box ul {
list-style: none;
width: 100%;
height: 100%;
/* perspective: 880px; */
transform-style: preserve-3d;
transition: all 10s ease;
}
.box ul li {
width: 200px;
height: 200px;
background: rgba(255, 0, 0, .8);
font-size: 80px;
color: #fff;
text-align: center;
line-height: 200px;
position: absolute;
}
.box ul li.font {
background: rgba(50, 102, 50, 0.5);
/* transform: translateZ(200px);也可设置为100px,后设置为-100px */
transform: translateZ(100px);
z-index: 12;
}
.box ul li.back {
background: rgba(0, 0, 255, .8);
transform: translateZ(-100px);
z-index: 10;
}
.box ul li.up {
background: rgba(255, 0, 0, .8);
/* transform: translateY(-200px); */
/* transform-origin: bottom center; */
transform: translateY(-100px) rotateX(90deg);
}
.box ul li.down {
background: rgba(255, 255, 0, .8);
/* transform: translateY(200px); */
/* transform-origin: top center; */
transform: translateY(100px) rotateX(-90deg);
}
.box ul li.left {
background: rgba(255, 0, 255, .8);
/* transform: translateX(-200px); */
/* transform-origin: right center; */
transform: translateX(-100px) rotateY(-90deg);
}
.box ul li.right {
background: rgba(0, 255, 255, .8);
/* transform: translateX(200px); */
/* transform-origin: left center; */
transform: translateX(100px) rotateY(90deg);
}
.box:hover ul{
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="font">前</li>
<li class="back">后</li>
<li class="up">上</li>
<li class="down">下</li>
<li class="left">左</li>
<li class="right">右</li>
</ul>
</div>
</body>
</html>