本篇全是实战,没有基础,如果不明白 3d 特效的原理,可能会看不懂,不过没关系,给你推荐一下 ,或者看我的另一篇博客 ,看完这些 3d 特效的原理基本就没问题了,下面实战开始
dom 结构
- <figure>
- <div>
- <span class="face">
- Hover Me
- </span>
- <span class="face">
- Button
- </span>
- </div>
- </figure>
原理:把两个 span 弄成方块,给 figure 绑定 hover: hover 时 div 绕 x 旋转
- figure:hover div {
- transform: rotateX(-90deg);
- }
- span.face:nth-child(1) {
- color: #fff;
- transform: translate3d(0, 0, 30px);
- -webkit-transform: translate3d(0, 0, 30px);
- }
- span.face:nth-child(2) {
- color: #094b2c;
- background: #fff;
- transform: rotateX(90deg) translate3d(0, 0, 30px);
- -webkit-transform: rotateX(90deg) translate3d(0, 0, 30px);
- }
在线
实现效果和 第一个类似 仅仅是 第一个有 2 个边 这个有 6 个边而已
第四个:3d 旋转地球仪
这个效果用到了一个 transform-origin 属性 这个属性是关键
他是控制坐标轴的 不懂的可以看我的这个文章
最后 ps:
现在心情非常不好,因为起初这篇文章是写的很详细的,在接近末尾的时候,我竟然把这个网页给关闭了,然后就什么都没有了,唉,是我花了 2 个小时写的,所以加上心情什么的,就不再重头写,
仅仅把 deom 附上,,,,,,最后又重新截了一边图,以后可得长点心了,
反正都有在线代码,演示,大家先看着,如果真有不太明白的,可以给我评论。我会一一答复的
来源: