css3D旋转立方体

3D旋转效果主要使用了CSS3 transform 属性

首先我们先完善布局

要想完成一个立方体,首先我们要有一个参考界面,也就是立方体的核心

如图,标注区域就是我们的核心区,立方体的每个界面都是以核心为参考系

核心区域只需要一个简单的平面就可以,记得加上transform-style: preserve-3d;子元素将保留其 3D 位置。

.box{
	 position: absolute;
	 height: 200px;
	 width: 200px;
	 top: 50%;
	 left: 50%;
	 margin-left: -100px;
	 margin-top: -100px;
	 transform-style: preserve-3d;
	 background: #eee;
	 box-sizing: border-box;
}        

接下来将定位六个面位置,为了方便观察位置,我们给核心区一个默认旋转值transform: rotateX(45deg) rotateY(45deg);

然后是根据核心区定位第一个面

.box{
	 position: absolute;
	 height: 200px;
	 width: 200px;
	 top: 50%;
	 left: 50%;
	 margin-left: -100px;
	 margin-top: -100px;
	 transform-style: preserve-3d;
	 background: #eee;
	 box-sizing: border-box;
     transform: rotateX(45deg) rotateY(45deg);
}  
.box li{
			position: absolute;
			top: 0;
			left: 0;
			list-style: none;
			width: 200px;
			height: 200px;
		}
		
		.box li:nth-child(1){
			background: #159DE3;
			transform: translateX(-100px) rotateY(90deg)
		}

translateX(-100px) rotateY(90deg)的意思是元素沿着X轴移动-100px,沿着 Y 轴的 3D 旋转90度
同理,与这个面对应的应该是元素沿着X轴移动100px,沿着 Y 轴的 3D 旋转90度
translateX(100px) rotateY(90deg)

红色被核心区挡住了一部分,放心不影响
举一反三,我们将其他界面完成

html,body {width: 100%;height: 100%;}
		* {margin: 0;padding: 0;}
		.box{
			position: absolute;
			height: 200px;
			width: 200px;
			top: 50%;
			left: 50%;
			margin-left: -100px;
			margin-top: -100px;
			transform-style: preserve-3d;
			background: #eee;
			box-sizing: border-box;
			transform: rotateX(45deg) rotateY(45deg);
		}
		.box li{
			position: absolute;
			top: 0;
			left: 0;
			list-style: none;
			width: 200px;
			height: 200px;
			opacity: 0.5;
		}
		
		.box li:nth-child(1){
			background: #159DE3;
			transform: translateX(-100px) rotateY(90deg)
		}
		 .box li:nth-child(2){
			background: red;
			transform: translateX(100px) rotateY(-90deg)
		}
		
		.box li:nth-child(3){
			background: orange;
			transform: translateZ(100px) rotateY(0deg)
		}
		.box li:nth-child(4){
			background: green;
			transform: translateZ(-100px) rotateY(0deg)
		}
		
		.box li:nth-child(5){
			background: pink;
			transform: translateY(-100px) rotateX(90deg);
		}
		.box li:nth-child(6){
			background: blue;
			transform: translateY(100px) rotateX(90deg);
		}

看上去不太美观,我们把核心区颜色去掉,核心区只是一个参考系的作用,没必要显示出来

哦了,布局已经完成,接下来让立方体跟着鼠标旋转
前面已经说过,所有的面都是根据核心区去定位的,所以旋转立方体其实就是旋转核心区
我们已经将核心区的旋转默认值设置为transform: rotateX(45deg) rotateY(45deg);

打开控制台我们来修改旋转值来看下效果

所以只要修改核心区的旋转,其他几个面也会相应的根据核心区做出位置改变

根据鼠标在body上的位置,来等比旋转立方体