快上车!博主带你裸眼看3D(1)

1.基础知识点—3D

---

在上面的代码中都是我们会使用到的,简单来介绍一下:

• translate3d (x,y,z); 用来调整元素的位置

• perspective: 数值 px;让我们产生透视的效果"近大远小"数值越小物体就越大,这个效果是给父盒子加,但产生效果是在子盒子上!

• transform:rotate(数值deg) ;物体产生旋转效果

• transform-style:preserve-3d; 该效果同样是给父盒子加,但产生效果是在子盒子上!

2.基础知识点—2D动画

---

给物体加上3D效果后为了让它(连续)运动起来,那我们还需要给物体加上2D的动画效果使这个物体有了生命一样运动起来!

step1:给整个物体定义动画名称rotate

.box {

position: relative;

width: 130px;

height: 130px;

margin: 100px auto;

transform-style: preserve-3d;

animation: rotate 6s linear infinite;

}

step2:将定义好的动画进行调用

@keyframes rotate {

0% {

transform: rotateY(0deg);

}

100% {

transform: rotateY(360deg) rotateX(360deg) rotatez(360deg);

}

}

三、制作思路

=====================================================================

有了一定的知识储备后我们就可以在制作前现有一定的设计思路,更快完成旋转的骰子这个效果咯!

• 首先我们需要让骰子的6个面的图片叠加一起放在一个盒子里(.box)

• 然后根据6个面需要挪动,让正面的图片往前(沿z轴正方向),背面的图片也同样往后(沿z轴负方向);左边的图片则需要先沿Y轴方向旋转90°,再沿X轴负方向移动,右边\上边\下边的同理;

• 6个面都挪动好后,就设置动画效果.

四、代码展示

=====================================================================

Html代码:搭建好结构

Css代码: