基于css3的3D立方体旋转特效（先translate与先rotate的不同）

本文主要是介绍基于css3的3D立方体旋转特效（先translate与先rotate的不同），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

这里写图片描述
3D变换基于几个比较重要的属性，perspective,translateZ,preserve-3d;
格式：
舞台(perspective)
容器(3D, preserve-3d)
内容

3D实现立方体盒子：
这里写图片描述

这里写图片描述

transform的4个属性，排序不同，带来的效果也不同。
先移动的代码：

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8" /><title>3d</title><style>*{padding: 0;margin: 0;}ul,li{list-style: none;}html{height: 100%;background: #ff0;}div{perspective: 1000px;}ul{width: 200px;height: 200px;margin: 100px auto;position: relative;transform-style: preserve-3d;font-size: 30px;line-height: 200px;text-align: center;color: #fff;transform: rotateX(30deg) rotateY(30deg);animation: rotate 18s infinite linear; }@keyframes rotate{from{transform: rotateX(0deg) rotateY(0deg);}to{transform: rotateX(360deg) rotateY(360deg);}}ul li{width: 100%;height: 100%;position: absolute;border: 1px solid #fff;background: #333;opacity: 0.6;}ul .front{transform: translateZ(100px);}ul .back{transform:translateZ(-100px)  rotateY(180deg);}ul .left{transform: translateX(-100px) rotateY(-90deg) ;}ul .right{transform:translateX(100px)  rotateY(90deg) ;}ul .top{transform: translateY(-100px) rotateX(90deg) ;}ul .bottom{transform: translateY(100px) rotateX(-90deg) ;}</style>
</head>
<body><div><ul><li class="front">前</li><li class="back">后</li><li class="left">左</li><li class="right">右</li><li class="top">上</li><li class="bottom">下</li></ul></div>
</body>
</html>

先旋转后移动，坐标轴改变方向。

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8" /><title>3d</title><style>*{padding: 0;margin: 0;}ul,li{list-style: none;}html{height: 100%;background: #ff0;}div{perspective: 1000px;}ul{width: 200px;height: 200px;margin: 100px auto;position: relative;transform-style: preserve-3d;font-size: 30px;line-height: 200px;text-align: center;color: #fff;transform: rotateX(30deg) rotateY(30deg);animation: rotate 18s infinite linear; }@keyframes rotate{from{transform: rotateX(0deg) rotateY(0deg);}to{transform: rotateX(360deg) rotateY(360deg);}}ul li{width: 100%;height: 100%;position: absolute;border: 1px solid #fff;background: #333;opacity: 0.6;}.front{transform: translateZ(100px);}.back{transform:rotateY(180deg) translateZ(100px);}.left{transform: rotateY(-90deg) translateZ(100px);}.right{transform:rotateY(90deg) translateZ(100px);}.top{transform: rotateX(90deg) translateZ(100px)  ;}.bottom{transform: rotateX(-90deg) translateZ(100px);}</style>
</head>
<body><div><ul><li class="front">前</li><li class="back">后</li><li class="left">左</li><li class="right">右</li><li class="top">上</li><li class="bottom">下</li></ul></div>
</body>
</html>