3D旋转正方体:
思路解析:
1.写一个大div盒子,里面嵌6个小盒子;
2.利用 父相子决 定位 ,让6个子盒子与父盒子全服叠加在一起,此时看起来就像只有一个盒子;
3.让6个子盒子分别沿着 x,y,z轴移动;
3.给父盒子透视,3d旋转和过度效果.
<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>
.box {
/* overflow: hidden; */
position: relative;
/* perspective: 800px; */
width: 300px;
height: 300px;
margin: 50px auto;
transition: all 3s;
transform-style: preserve-3d;
}
.box:hover {
transform: rotate3d(1, 1, 1, 360deg);
}
.box div {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
text-align: center;
line-height: 300px;
color: white;
}
.box div:first-child {
background-color: rgba(148, 176, 63, .5);
transform: translatez(150px);
}
.box div:nth-child(2) {
background-color: rgba(149, 176, 109, .5);
transform: translatez(-150px);
}
.box div:nth-child(3) {
background-color: rgba(141, 115, 176, .5);
transform: translatey(-150px) rotateX(90deg);
}
.box div:nth-child(4) {
background-color: rgba(120, 217, 176, .5);
transform: translatey(150px) rotateX(-90deg);
}
.box div:nth-child(5) {
background-color: rgba(121, 163, 221, .5);
transform: translatex(-150px) rotateY(-90deg);
}
.box div:nth-child(6) {
background-color: rgba(148, 176, 63, .5);
transform: translatex(150px) rotateY(90deg);
}
/* .two{
position: absolute;
left: 20px;
top: 20px;
}
.one {
/* overflow: hidden; */
/* position: relative; */
/* perspective: 800px; */
/* width: 120px;
height: 120px;
margin: 50px auto;
transition: all 3s;
transform-style: preserve-3d;
}
.one:hover {
transform: rotate3d(1, 1, 1, 360deg);
}
.one div {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
text-align: center;
line-height: 120px;
color: white;
}
.one div:first-child {
background-color: rgba(148, 176, 63, .5);
transform: translatez(60px);
}
.one div:nth-child(2) {
background-color: rgba(149, 176, 109, .5);
transform: translatez(-60px);
}
.one div:nth-child(3) {
background-color: rgba(141, 115, 176, .5);
transform: translatey(-60px) rotateX(90deg);
}
.one div:nth-child(4) {
background-color: rgba(120, 217, 176, .5);
transform: translatey(60px) rotateX(-90deg);
}
.one div:nth-child(5) {
background-color: rgba(121, 163, 221, .5);
transform: translatex(-60px) rotateY(-90deg);
}
.one div:nth-child(6) {
background-color: rgba(148, 176, 63, .5);
transform: translatex(60px) rotateY(90deg);
} */ */
</style>
</head>
<body>
<div class="box">
<div>前面</div>
<div>后面</div>
<div>上面</div>
<div>下面</div>
<div>左面</div>
<div>右面</div>
<div class="two">
<div class="one">
<div>前面</div>
<div>后面</div>
<div>上面</div>
<div>下面</div>
<div>左面</div>
<div>右面</div>
</div>
</div>
</div>
</body>
</html>
效果图:
2阶魔方:
<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>
.box{
position: relative;
width: 100px;
height: 100px;
margin: 150px auto;
transition: all 200s;
transform-style: preserve-3d;
transform: rotateX(15deg) rotateY(-15deg);
}
.box:hover{
transform: rotateX(-8000deg) rotateY(8000deg) rotateZ(8000deg) scale3d(0,0,0);
}
.box div{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.box div:nth-child(1){
background: rgba(225,0,0,0.9);
transform: rotateX(90deg) translateZ(50px);
}
.box div:nth-child(2){
background: rgba(225, 210, 0,0.9);
transform: translateZ(-50px);
}
.box div:nth-child(3){
background: rgba(56, 225, 0,0.9);
transform: translateZ(50px);
}
.box div:nth-child(4){
background: rgba(255, 192, 203, 0.89);
transform: rotateX(-90deg) translateZ(50px);
}
.box div:nth-child(5){
background: rgba(41, 0, 225,0.9);
transform: rotateY(90deg) translateZ(50px);
}
.box div:nth-child(6){
background: rgba(225, 0, 180,0.9);
transform: rotateY(-90deg) translateZ(50px);
}
.a1{
transform: translateX(0px) translateY(-110px);
animation: a11 1s 1S linear forwards,a12 1s 2s linear forwards,a13 1s 7s linear forwards,a14 1s 8s linear forwards,a15 2s 4s linear forwards
}
.a2{
transform: translateX(110px) translateY(-100px);
animation: a21 1s linear forwards,a22 1s 1s linear forwards,a23 1s 8s linear forwards,a24 1s 9s linear forwards,a25 2s 4s linear forwards
}
.a3{
transform: translateX(110px) translateY(10px);
animation: a31 1s linear forwards,a32 1s 1s linear forwards,a33 1s 2s linear forwards,a34 1s 3s linear forwards,a35 1s 6s linear forwards,a36 1s 7s linear forwards,a37 1s 8s linear forwards,a38 1s 9s linear forwards,a39 2s 4s linear forwards
}
.a4{
transform: translateX(0px) translateY(10px);
animation: a41 1s 2s linear forwards, a42 1s 3s linear forwards, a43 1s 6s linear forwards,a44 1s 7s linear forwards,a45 2s 4s linear forwards
}
.a5{
transform: translateX(0px) translateY(10px) translateZ(110px);
animation: a51 1s 2s linear forwards,a52 1s 7s linear forwards,a53 2s 4s linear forwards
}
.a6{
transform: translateX(110px) translateY(10px) translateZ(110px);
animation: a61 1s linear forwards,a62 1s 3s linear forwards,a63 1s 6s linear forwards,a64 1s 9s linear forwards,a65 2s 4s linear forwards
}
.a7{
transform: translateX(110px) translateY(-100px) translateZ(110px);
animation: a71 1s linear forwards, a72 1s 3s linear forwards,a73 1s 6s linear forwards,a74 1s 9s linear forwards,a75 2s 4s linear forwards
}
.a8{
transform: translateX(0px) translateY(-100px) translateZ(110px);
animation: a81 1s 1S linear forwards,a82 1s 8S linear forwards,a83 2s 4s linear alternate;
}
@keyframes a41{
100%{
transform: translateX(0px) translateZ(110px) translateY(10px) rotateX(90deg);
}
}
@keyframes a42{
100%{
transform: translateX(0px) translateZ(0px) translateY(10px) rotateX(90deg) rotateZ(90deg);
}
}
@keyframes a43{
100%{
transform: translateX(0px) translateZ(110px) translateY(10px) rotateX(90deg) rotateZ(0deg);
}
}
@keyframes a44{
100%{
transform: translateX(0px) translateZ(0px) translateY(10px) rotateX(0deg);
}
}
@keyframes a51{
100%{
transform: translateX(0px) translateZ(110px) translateY(-100px) rotateX(90deg);
}
}
@keyframes a52{
100%{
transform: translateX(0px) translateZ(110px) translateY(10px) rotateX(0deg);
}
}
@keyframes a71{
100%{
transform: translateX(110px) translateZ(110px) translateY(10px) rotateX(-90deg);
}
}
@keyframes a72{
100%{
transform: translateX(0px) translateZ(110px) translateY(10px) rotateX(-90deg) rotateZ(-90deg);
}
}
@keyframes a73{
100%{
transform: translateX(110px) translateZ(110px) translateY(10px) rotateX(-90deg);
}
}
@keyframes a74{
100%{
transform: translateX(110px) translateZ(110px) translateY(-100px) rotateX(0deg);
}
}
@keyframes a61{
100%{
transform: translateX(110px) translateZ(0px) translateY(10px) rotateX(-90deg);
}
}
@keyframes a62{
100%{
transform: translateX(110px) translateZ(110px) translateY(10px) rotateX(-90deg) rotateZ(-90deg);
}
}
@keyframes a63{
100%{
transform: translateX(110px) translateZ(0px) translateY(10px) rotateX(-90deg);
}
}
@keyframes a64{
100%{
transform: translateX(110px) translateZ(110px) translateY(10px) rotateX(0deg);
}
}
@keyframes a21{
100%{
transform: translateX(110px) translateZ(110px) translateY(-100px) rotateX(-90deg);
}
}
@keyframes a22{
100%{
transform: translateX(110px) translateZ(0px) translateY(-100px) rotateX(-90deg) rotateY(0deg) rotateZ(90deg);
}
}
@keyframes a23{
100%{
transform: translateX(110px) translateZ(110px) translateY(-100px) rotateX(-90deg);
}
}
@keyframes a24{
100%{
transform: translateX(110px) translateZ(0px) translateY(-100px) rotateX(0deg);
}
}
@keyframes a31{
100%{
transform: translateX(110px) translateZ(0px) translateY(-100px) rotateX(-90deg);
}
}
@keyframes a32{
100%{
transform: translateX(0px) translateZ(0px) translateY(-100px) rotateX(-90deg) rotateY(0deg) rotateZ(90deg);
}
}
@keyframes a33{
100%{
transform: translateX(0px) translateZ(0px) translateY(10px) rotateY(90deg) rotateX(-90deg) rotateY(-90deg);
}
}
@keyframes a34{
100%{
transform: translateX(110px) translateZ(0px) translateY(10px) rotateY(90deg) rotateX(-90deg) rotateY(-90deg) rotateX(-90deg);
}
}
@keyframes a35{
100%{
transform: translateX(0px) translateZ(0px) translateY(10px) rotateY(90deg) rotateX(-90deg) rotateY(-90deg);
}
}
@keyframes a36{
100%{
transform: translateX(0px) translateZ(0px) translateY(-100px) rotateY(90deg) rotateX(-90deg);
}
}
@keyframes a37{
100%{
transform: translateX(110px) translateZ(0px) translateY(-100px) rotateX(-90deg);
}
}
@keyframes a38{
100%{
transform: translateX(110px) translateZ(0px) translateY(10px) rotateX(0deg);
}
}
@keyframes a81{
100%{
transform: translateX(110px) translateZ(110px) translateY(-100px) rotateY(90deg);
}
}
@keyframes a82{
100%{
transform: translateX(0px) translateZ(110px) translateY(-100px) rotateY(0deg);
}
}
@keyframes a11{
100%{
transform: translateX(0px) translateZ(110px) translateY(-100px) rotateY(90deg);
}
}
@keyframes a12{
100%{
transform: translateX(0px) translateZ(0px) translateY(-100px) rotateY(90deg) rotateZ(90deg);
}
}
@keyframes a13{
100%{
transform: translateX(0px) translateZ(110px) translateY(-100px) rotateY(90deg);
}
}
@keyframes a14{
100%{
transform: translateX(0px) translateZ(0px) translateY(-100px) rotateY(0deg);
}
}
@keyframes a83{
50%{
transform: translate3d(200px,-200px,200px)
}
}
@keyframes a53{
50%{
transform: translate3d(-200px,-200px,200px)
}
}
@keyframes a75{
50%{
transform: translate3d(-200px,200px,200px)
}
}
@keyframes a65{
50%{
transform: translate3d(200px,200px,200px)
}
}
@keyframes a15{
50%{
transform: translate3d(-200px,-200px,-200px)
}
}
@keyframes a25{
50%{
transform: translate3d(200px,-200px,-200px)
}
}
@keyframes a39{
50%{
transform: translate3d(200px,200px,-200px)
}
}
@keyframes a45{
50%{
transform: translate3d(-200px,200px,-200px)
}
}
</style>
</head>
<body>
<div class="box">
<div style="opacity: 0;">1</div>
<div style="opacity: 0;">1</div>
<div style="opacity: 0;">1</div>
<div style="opacity: 0;">1</div>
<div style="opacity: 0;">1</div>
<div style="opacity: 0;">1</div>
<div class="box a1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box a2">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box a3">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box a4">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box a5">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box a6">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box a7">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box a8">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>
效果图:
