「趣学前端」开耍 CSS 的 3D 转换,不会玩滑板但能画滑板
背景
我身边一些非互联网技术从业的朋友,偶尔看我转发到朋友圈的文章,会表示出一定的兴趣。前段时间,有朋友问我公众号的问题,所以我来了灵感,准备写一个趣学前端系列,适用于零基础、新手前端或者想把编程当做兴趣培养的人。
学问必须合乎自己的兴趣,方可得益。 ——莎士比亚
上篇习题解析
上一篇的一个小习题,是如何实现一个立体的鼠标垫效果。
上篇文章绘制了一些平面图形,2D 图形大多在 X 轴和 Y 轴上,旋转,缩放,移动,倾斜。立体图形,则需要再 Z 轴上下功夫了。
所以实现一个立体的鼠标垫效果,也是通过设置 Z 轴的旋转来实现。
https://code.juejin.cn/pen/7129910825347153961
知识点讲解
今天来聊聊 transform 的 3D 转换功能。
3D 转换
滑板
效果展示
实现方案
先来看滑板的表情🛹,在对比左侧的图片,是不是还挺像的。
滑板有两部分组成,板子和轮子。
为了实现板子翘起的效果,两头使用了两个半圆。再设置 Y 轴和 X 轴的偏移角度,便可以呈现不同的翘起效果。
桌子上手机
效果展示
实现方案
手机是立体的。
将屏幕沿着 Z 轴做了偏移处理,即设置了样式:transform: translateZ(1px)。这样一来屏幕和机体有了细微的间距,手机便有了厚度的视觉效果。
3D 环绕
效果展示
实现方案
3D 环绕,可以看到每一个矩形面。
将父元素的 transform-style 属性值设置为 preserve-3d,可以让所有子元素在 3D 空间中呈现。
因为环绕组成的是一个圈,为了看到对面的矩形面,为每个矩形元素设置了 Y 轴和 Z 轴的偏移距离,即 transform: rotateY(5deg) translateZ(200px)。
橡皮擦
效果展示
实现方案
橡皮擦是一个立体矩形,属于 3D 效果。3D 效果一般展示 3 个面及以上。
将父元素的 transform-style 属性值设置为 preserve-3d,可以让所有子元素在 3D 空间中呈现。
再将三个面适当旋转合在一起,便可以实现一个 3D 的橡皮擦。
知识点
以下知识内容来自于菜鸟教程
transform (3D)
应用于元素的 3D 转换。
属性值
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n):定义 3D 转换,使用 16 个值的 4x4 矩阵。
translate3d(x,y,z):定义 3D 转换。
translateZ(z):定义 3D 转换,只是用 Z 轴的值。
scale3d(x,y,z):定义 3D 缩放转换。
scaleZ(z):通过设置 Z 轴的值来定义 3D 缩放转换。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle):定义沿着 X 轴的 3D 旋转。
rotateY(angle):定义沿着 Y 轴的 3D 旋转。
rotateZ(angle):定义沿着 Z 轴的 3D 旋转。
perspective(n):为 3D 转换元素定义透视视图。
transform-origin
允许更改转换元素的位置。
2D 转换元素可以改变元素的 X 和 Y 轴。
3D 转换元素,还可以更改元素的 Z 轴。
属性值
x-axis:定义视图被置于 X 轴的何处。可能的值:left、center、right、length、%、y-axis。
定义视图被置于 Y 轴的何处。可能的值:top、center、bottom、length、%、z-axis
定义视图被置于 Z 轴的何处。可能的值:length
transform-style
指定嵌套元素是怎样在三维空间中呈现。
属性值
flat:表示所有子元素在 2D 平面呈现。
preserve-3d:表示所有子元素在 3D 空间中呈现。
讲解代码
https://code.juejin.cn/pen/7129919078689505295
讲解代码操作步骤
演示代码都可通过代码复制拷贝到本地的 IDE 中进行演示。也可以自己照着敲击学习。
第一步:选中一个想查看代码的功能项;
第二步:将查看的功能的代码进行复制;
第三步:将代码粘贴到一个空档 html 文档中;
第四步:右键操作这个新建的 html 文档,选择在浏览器中打开,刚才的功能就在页面中出来啦。
一个小习题
上面的 3D 环绕是展示效果,实际在做环绕的功能的时候加上旋转效果,所以一个 3D 环绕旋转的效果是如何实现的呢?解答方案会在下篇文章中给出。
总结
transform-style 还挺好用的。大部分时候,实现 3D 效果,在父元素上设置 transform-style 属性的值为 preserve-3d,后面的就可以随意发挥了。
有时候学习并不困难,如何应用是关键,所以,想要熟练的掌握前端知识,还需要不断的练习和应用。
前端的千变万化,源于对前端知识的融会贯通。
版权声明: 本文为 InfoQ 作者【叶一一】的原创文章。
原文链接:【http://xie.infoq.cn/article/16f69269396feda1c7ef727d9】。文章转载请联系作者。
评论