#盒子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>
