CSS3学习-实现正方体旋转

简介

1.用CSS构造正方体

什么是正方体？这应该，没人不知道，它的结构分解如下

所以很明确，我们需要用到6个div来构造，外加一个外型，共七个，1为正面
先简单定义

		<div class="cube">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
		</div>

这里使用less预处理来编程css
首先，对每个面进行分析，确定每个面的基点，以及旋转方向和位置，下图黑处为基点

以此来设置各个初始值

//每两个数值为一个面的基点坐标
@norigin:0,0,100%,50%,0,0,0,50%,50%,0,50%,100%;
//每三个数值为一个面的旋转角度，对应X,Y,Z
@nrotate:0,0,0,0,90deg,0,0,0,0,0,-90deg,0,90deg,0,0,-90deg,0,0;

之后为了设置以id为cube的div为中心，来进行位移

//每三个数值为一个面的位移距离，对应X,Y,Z
@ntranslate:0,0,-150px,0,0,-150px,0,0,150px,0,0,-150px,0,0,-150px,0,0,-150px;

设置基础属性，css代码为

.cube div:nth-child(1),
.cube div:nth-child(2),
.cube div:nth-child(3),
.cube div:nth-child(4),
.cube div:nth-child(5),
.cube div:nth-child(6),
.recen {
	position: absolute;
	font-size: 45px;
	line-height: 300px;
	text-align: center;
	width: 300px;
	height: 300px
}

.cube div:nth-child(1) {
	background: rgba(255, 0, 0, .5);
	transform-origin: 0 0;
	transform: translate3d(0, 0, -150px) rotateX(0) rotateY(0) rotateZ(0);
	z-index: 6
}

.cube div:nth-child(2) {
	background: rgba(0, 255, 0, .5);
	transform-origin: 100% 50%;
	transform: translate3d(0, 0, -150px) rotateX(0) rotateY(90deg) rotateZ(0);
	z-index: 5
}

.cube div:nth-child(3) {
	background: rgba(0, 0, 255, .5);
	transform-origin: 0 0;
	transform: translate3d(0, 0, 150px) rotateX(0) rotateY(0) rotateZ(0);
	z-index: 4
}

.cube div:nth-child(4) {
	background: rgba(253, 153, 235, .5);
	transform-origin: 0 50%;
	transform: translate3d(0, 0, -150px) rotateX(0) rotateY(-90deg) rotateZ(0);
	z-index: 3
}

.cube div:nth-child(5) {
	background: rgba(255, 141, 0, .5);
	transform-origin: 50% 0;
	transform: translate3d(0, 0, -150px) rotateX(90deg) rotateY(0) rotateZ(0);
	z-index: 2
}

.cube div:nth-child(6) {
	background: rgba(255, 224, 0, .5);
	transform-origin: 50% 100%;
	transform: translate3d(0, 0, -150px) rotateX(-90deg) rotateY(0) rotateZ(0);
	z-index: 1
}

接着为了能够更直白的看到立体效果，来旋转cube中心点，对他设置css如下

.cube {
	display: flex;
	justify-content: center;
	align-items: center
	position: absolute;
	width: 50px;
	height: 50px;
	border: 1px solid;
	perspective: 300;
	top: 35%;
	left: 15%;
	transform-style: preserve-3d;
	transform-origin: 50% 50% 50%;
	transform: rotateX(30deg) rotateY(30deg) rotateZ(0) translate3d(0, 0, 0)
}

之后就能看到初步效果图

2.设置旋转

然后呢就开始让他旋转起来，利用animation，来设置旋转，部分代码如下，最后去除了颜色效果

@keyframes roll{
    0%{
        transform: rotateX(30deg) rotateY(10deg) rotateZ(0deg);
        }
    15%{
        transform: rotateX(30deg) rotateY(-30deg) rotateZ(0deg);
        }
    30%{
        transform: rotateX(30deg) rotateY(90deg) rotateZ(10deg);
        }
    45%{
        transform: rotateX(30deg) rotateY(180deg) rotateZ(10deg);
        }
    60%{
        transform: rotateX(30deg) rotateY(270deg) rotateZ(15deg);
        }
    75%{
        transform: rotateX(-90deg) rotateY(10deg) rotateZ(15deg);
        }
    90%{
        transform: rotateX(90deg) rotateY(10deg) rotateZ(0deg);
        }
    100%{
        transform: rotateX(0deg) rotateY(5deg) rotateZ(0deg);
        }
}

效果如图：