【深圳】DJI 大疆创新 互联网团队 前端及大量职位招聘中 (内推 15-50k + 丰厚年终 + 股份)简历请发至 evan.zhou@dji.com, 合适的话当天回复,当天内推。 更多福利

闲着无聊,学点自己不擅长的,CSS 3D 效果。
扫码看效果

今天想了想自己好像写过 3D 相关的内容,于是乎就找了篇别人的文章
然后照搬过来。。。
毕竟老子不会啊 Orz
不过还挺有收获,写篇文章记录下。

HTML

1
2
3
4
5
6
7
8
9
10
<div class='camera'>
<div class='box'>
<div class="face face1">1</div>
<div class="face face2">2</div>
<div class="face face3">3</div>
<div class="face face4">4</div>
<div class="face face5">5</div>
<div class="face face6">6</div>
</div>
</div>

camera 元素用来控制景深 (perspective);
box 元素包裹着六个面,主要用来做动画;
face1-6 6个面组成一个正方体;

CSS

先把基本的样式搭好

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.camera {
width: 200px;
height: 200px;
perspective-origin: center;
perspective: 200px;
}
.box {
transform-style:preserve-3d;
position:relative;
width:100%;
height:100%;
border:1px dashed #000;
}

.face {
width: 100px;
height: 100px;
background: red;
display: flex;
align-items: center;
justify-content: center;
font-size: 38px;
color: white;
position: absolute;
}

And,打开你的脑洞,开启3D模式。

第一块板比较简单,因为它在地面正上方50像素的位置:

1
2
3
4
.face1 {
background: #3498db;
transform:translateX(50px) translateY(50px) translateZ(50px);
}

first face
第二块面板在正方体的右面:

1
2
3
4
5
.face2 {
background: #9b59b6;
transform-origin: 0 0;
transform:translateX(150px) translateY(50px) translateZ(50px) rotateY(90deg);
}

注意,transform 是有顺序的,先旋转,再平移 和平移之后再旋转得到的效果可能不同。
接着靠你的空间想象力把其他面也放置在正确的位置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.face3 {
background: #f1c40f;
transform-origin: 0 0;
transform:translateX(50px) translateY(50px) translateZ(50px) rotateX(-90deg);
}
.face4 {
background: #7f8c8d;
transform-origin: 0 0;
transform:translateX(50px) translateY(150px) translateZ(50px) rotateX(-90deg);
}
.face5 {
background: #2ecc71;
transform-origin: 100% 100%;
transform: translateX(-50%) translateY(50px) translateZ(50px) rotateY(-90deg);
}
.face6 {
background: #34495e;
transform: translateX(50px) translateY(50px) translateZ(-50px) rotateY(-180deg);
}

如何实验是否正确呢?旋转 box 试试

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.box {
animation: rotate 4s linear infinite ;
}

@keyframes rotate{
0%{
-webkit-transform:rotateY(0) rotateX(0);
}
50%{
-webkit-transform:rotateY(-359.9deg) rotateX(0);
}
100% {
-webkit-transform:rotateY(-359.9deg) rotateX(-359.9deg);
}
}

旋转

陀螺仪

3d效果再搭配上陀螺仪就牛X了。

1
2
3
4
5
6
7
8
9
10
11
var box = document.querySelectorAll('.box');
window.addEventListener('deviceorientation', function(event) {
var alpha = event.alpha,
beta = event.beta,
gamma = event.gamma;

box[0].style.webkitTransform = 'rotateX(' + beta + 'deg) rotateY(' + gamma + 'deg) rotateZ(' + alpha + 'deg)';
box[0].style.transform = 'rotateX(' + beta + 'deg) rotateY(' + gamma + 'deg) rotateZ(' + alpha + 'deg)';
box[0].style.mozTransform = 'rotateX(' + beta + 'deg) rotateY(' + gamma + 'deg) rotateZ(' + alpha + 'deg)';

}, false);

现在可以用手机看效果了。

扫码看效果

人在一个环境下生活太久,就容易产生惰性。因为不管你怎么活,明天太阳照样升起。
我们能做的,就是尽全力不让自己被这种慢性毒药所蛊惑,努力,努力冲开束缚你的结界。
毕竟 2D 生物是无法理解 3D 世界长什么样的。

推荐

如需转载,请注明出处: http://w3ctrain.com / 2016/10/07/box-3d-demo/

3d