css3立方体实现思路:立方体六个面 通过ul、li来创建每个面。通过浮动把六个面叠在一起,在通过旋转平移每个面便可实现立方体。六个面中前面要沿着Z轴平移宽度的一半,后面要沿着Z轴平移宽度的一半,但方向相反为负的宽度的一半。左面需要先沿着Y轴旋转90度,在平移宽度的一半。右面需要先沿着Y轴旋转-90度,在平移宽度的一半。上面需要先沿着X轴旋转90度,在平移宽度的一半。下面需要先沿着X轴旋转-90度,在平移宽度的一半。这样六给面就设置完成了。最后通过总容器的旋转来看出立方体的效果。
HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--创建总容器-->
<div class="container"></div>
<script src="app.js"></script>
</body>
</html>
CSS代码:
*{
margin: 0;
padding:0;
}
/*创建rotate动画*/
@keyframes rotate {
from{
transform: rotateX(0deg) rotateY(0deg);
}
to{
transform: rotateX(360deg) rotateY(360deg);
}
}
js代码:
// 创建嵌套立方体
(function () {
// 创建立方体的函数 需要传类名和宽度
function cube(className,maxWidth) {
// 判断类名为out-cube宽度为传进来的宽度,类名为其他则是1/2的宽度
var width = className==="out-cube"?maxWidth:maxWidth/2;
// 创建一个容器
var bg = document.createElement("div");
// 设置其样式 并设为绝对定位
bg.style.cssText = "width: "+width+"px;height: "+width+"px;position: absolute;";
// 创建一个ul 放进bg里
var ul = document.createElement("ul");
bg.appendChild(ul);
// 设置ul的样式 并设为相对定位 transform-style: preserve-3d(表示所有子元素在3D空间中呈现);
ul.style.cssText = "width: "+width+"px;height: "+width+"px;list-style: none;position: relative;transform-style: preserve-3d;";
// 设置ul的类名为传进来的类名
ul.setAttribute("class",className);
// 创建一个样式数组 为创建正方体做准备
var styles = ["background-color: #0970ff;transform: translateZ("+width/2+"px);","background-color: #bb5eff;transform: translateZ("+-width/2+"px);","background-color: #b9ffae;transform: rotateY(-90deg) translateZ("+width/2+"px);","background-color: #ffdf38;transform: rotateY(90deg) translateZ("+width/2+"px);","background-color: #61ff4d;transform: rotateX(-90deg) translateZ("+width/2+"px);","background-color: #ff328a;transform: rotateX(90deg) translateZ("+width/2+"px);"];
// 通过for循环创建立方体的每个面 并把每个面的样式添加进去
for (var i=0;i<styles.length;i++){
var li = document.createElement("li");
// 给每个li设置宽高和绝对定位 以及透明度 方便看见里面的小立方体
var css = styles[i]+"opacity: 0.4;width: "+width+"px;height: "+width+"px;position: absolute;";
// 如果类名为in-cube的样式加入left: 50%;top: 50%;
css+=className==="in-cube"?"left: 50%;top: 50%;":"";
li.style.cssText = css;
// 把每个li放进ul中
ul.appendChild(li);
}
// 放回bg容器
return bg;
}
// 创建嵌套立方体的方法 传一个宽度
function doubleCub(width) {
// 写一个总容器
var container = document.createElement("div");
// 设置其样式 并执行名字为rotate的动画
container.style.cssText = "width: "+width+"px;height: "+width+"px;margin: 200px auto;transform-style: preserve-3d;animation: rotate 5s linear 0s infinite;";
// 放入两个立方体
container.appendChild(cube("out-cube",width));
container.appendChild(cube("in-cube",width));
// 放回总容器
return container;
}
// 初始化函数
function init() {
// 把总容器放入页面中
document.body.appendChild(doubleCub(300));
}
init();
})();