今天给大家分享的是 CSS3 制作的带 3d 效果的方块, 上面简单整理了一下 2019 年的网红热词. 这个 DEMO 用到了 CSS3 的 3d 变化技巧, 做出来的效果还不错. 请注意, 该 3d 效果依赖 transform-style: preserve-3d 属性, 必须在现代浏览器或 IE11 中才能看到效果.
前端代码
html 代码:
- <div id="effect-3d-box">
- <div class="area"> 盘他 </div>
- <div class="area"> 柠檬精 </div>
- <div class="area">OMG</div>
- <div class="area"> 我太难了 </div>
- <div class="area">996</div>
- <div class="area"> 我信你个鬼 </div>
- </div>
CSS3 代码:
- #effect-3d-box {
- position: relative;
- margin: auto;
- margin-top: 80px;
- margin-bottom: 80px;
- width: 100px;
- height: 100px;
- transform-style: preserve-3d;
- -webkit-transform-style: preserve-3d;
- -moz-transform-style: preserve-3d;
- animation: rotate 20s linear 0s infinite;
- -webkit-animation: rotate 20s linear 0s infinite;
- }
- #effect-3d-box> .area {
- position: absolute;
- display: flex;
- flex-flow: row nowrap;
- align-items: center;
- justify-content: center;
- top: 0;
- left: 0;
- width: 100px;
- height: 100px;
- background-color: #e74c3c;
- color: white;
- }
- #effect-3d-box> .area:nth-child(2) {
- transform: translateZ(-100px) rotateX(180deg);
- -webkit-transform: translateZ(-100px) rotateX(180deg);
- -moz-transform: translateZ(-100px) rotateX(180deg);
- -ms-transform: translateZ(-100px) rotateX(180deg);
- -o-transform: translateZ(-100px) rotateX(180deg);
- background-color: #e67e22;
- }
- #effect-3d-box> .area:nth-child(3) {
- transform: rotateX(-90deg);
- -webkit-transform: rotateX(-90deg);
- -moz-transform: rotateX(-90deg);
- -ms-transform: rotateX(-90deg);
- -o-transform: rotateX(-90deg);
- transform-origin: 50% 0 0;
- background-color: #f1c40f;
- }
- #effect-3d-box> .area:nth-child(4) {
- transform: rotateX(90deg) rotateY(180deg);
- -webkit-transform: rotateX(90deg) rotateY(180deg);
- -moz-transform: rotateX(90deg) rotateY(180deg);
- -ms-transform: rotateX(90deg) rotateY(180deg);
- -o-transform: rotateX(90deg) rotateY(180deg);
- transform-origin: 50% 100% 0;
- background-color: #2ecc71;
- }
- #effect-3d-box> .area:nth-child(5) {
- transform: rotateY(90deg) rotateX(180deg);
- -webkit-transform: rotateY(90deg) rotateX(180deg);
- -moz-transform: rotateY(90deg) rotateX(180deg);
- -ms-transform: rotateY(90deg) rotateX(180deg);
- -o-transform: rotateY(90deg) rotateX(180deg);
- transform-origin: 0 50% 0;
- background-color: #3498db;
- }
- #effect-3d-box> .area:nth-child(6) {
- transform: rotateY(-90deg) rotateX(180deg);
- -webkit-transform: rotateY(-90deg) rotateX(180deg);
- -moz-transform: rotateY(-90deg) rotateX(180deg);
- -ms-transform: rotateY(-90deg) rotateX(180deg);
- -o-transform: rotateY(-90deg) rotateX(180deg);
- transform-origin: 100% 50% 0;
- background-color: #9b59b6;
- }
- @keyframes rotate {
- from {
- transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
- -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
- -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
- -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
- -o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
- }
- to {
- transform: rotateX(360deg) rotateY(720deg) rotateZ(1080deg);
- -webkit-transform: rotateX(360deg) rotateY(720deg) rotateZ(1080deg);
- -moz-transform: rotateX(360deg) rotateY(720deg) rotateZ(1080deg);
- -ms-transform: rotateX(360deg) rotateY(720deg) rotateZ(1080deg);
- -o-transform: rotateX(360deg) rotateY(720deg) rotateZ(1080deg);
- }
- }
Web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法
(从零基础开始到前端项目实战教程, 学习工具, 职业规划 )
知识点提炼
如果要用 CSS3 让一个元素呈现 3D 效果, 该元素必须添加
transform-style: preserve-3d
属性, 由于兼容性问题, 一些老式浏览器是没有办法呈现 3D 效果的.
3d 盒子制作的思路是先让 6 个 div 重叠在一起, 然后分别赋予每个面 transform 变幻. 最关键的是我们需要清楚每个面变幻的轴心, 3D 轴心对应的属性是 transform-origin.
有些面上的文字在 3D 变化之后会出现显示错乱的问题, 需要进行 2 次修正, 因此你会看到有些面的属性包含了两个 transform 转换.
3D 坐标轴方向要牢记: 屏幕横向为 x 轴, 纵向为 y 轴, 超越 2 次元连接我们眼睛和屏幕之间的直线是 z 轴, 记住以上规律做 3D 变化会简单很多!
希望大家可以举一反三, 做出更多好玩的 3D 特效. 另外这个 3D 效果中总结的 2019 年的几个热词, 你遇到了几个呢?
来源: http://www.jianshu.com/p/4c7fca184174