写点什么

「趣学前端」玩转 CSS 的 2D 转换,也许能有个代码纸片人

作者:叶一一
  • 2022-10-16
    北京
  • 本文字数:1705 字

    阅读完需:约 1 分钟

「趣学前端」玩转CSS的2D转换,也许能有个代码纸片人

背景

我身边一些非互联网技术从业的朋友,偶尔看我转发到朋友圈的文章,会表示出一定的兴趣。前段时间,有朋友问我公众号的问题,所以我来了灵感,准备写一个趣学前端系列,适用于零基础、新手前端或者想把编程当做兴趣培养的人。

学问必须合乎自己的兴趣,方可得益。 ——莎士比亚

上篇习题解析

上一篇结尾留了一个小习题,我们先来看一下,进度条效果如何实现。

进度条效果有多种实现方法,最丝滑的当属 animation 动画效果。但是结合本篇文章要讲的知识点,我这里给出一种通过 2D 转换的实现方法。

  • 为进度条父元素设置超出隐藏的值;

  • 将进度条元素的 transform 属性的值为 translateX(-50%),即向左偏移 50%,这个时候只进度条元素在可视范围内只展示 50%的内容;

  • 当鼠标经过时,设置 transform: translateX(0),即没有偏移,这个时候进度条会完全展示出来。

  • 这样就实现了鼠标经过时,就会有进度条加载 100%的效果。

https://code.juejin.cn/pen/7129470815531171843

知识点讲解

今天来聊聊 transform 的 2D 转换功能。

2D 转换

时钟的走针

效果展示

实现方案

时钟的走针即时针和分针,在不同时候会指向不同的数字,这时候呈现在时钟上的角度也不一样。所以想要实现走针,将两个走针设置不同的旋转角度即可。

走针是一个带圆角的矩形,通过设置 transform 属性 rotate 值就可以指向时钟不同的位置。

时针我设置的是上午 11 时,时针元素的属性设置为 transform: rotate(-30deg),分针设置的 10 分,分针元素属性设置为 transform: rotate(62deg)


一排泡泡

效果展示

实现方案

其实这一排的泡泡在没有设置 transform 属性的情况下,样式是完全一致的。

之所以呈现递减的效果,是因为我再后面两个泡泡元素上设置了缩放。第二个泡泡缩放为 0.7,即 transform: scale(0.7),第三个泡泡缩放为 0.6,即 transform: scale(0.6)。

广告牌

效果展示

实现方案

其实这一排的泡泡在没有设置 transform 属性的情况下,样式是完全一致的。

之所以呈现递减的效果,是因为我再后面两个泡泡元素上设置了缩放。第二个泡泡缩放为 0.7,即 transform: scale(0.7),第三个泡泡缩放为 0.6,即 transform: scale(0.6)。


行走的小人

效果展示

实现方案

行走的小人灵魂在于摆动的手臂和腿。四肢是线条的情况下,为元素的 transform 属性设置旋转,就可以实现摆动的效果。

这里我把火柴人的左臂和右臂设置的旋转角度不同。左臂是 transform: rotate(30deg),右臂是 transform: rotate(-140deg)。


知识点

以下知识内容来自于菜鸟教程

transform (2D)

应用于元素的 2D 转换。 none:定义不进行转换。

属性值

matrix(n,n,n,n,n,n):定义 2D 转换,使用六个值的矩阵。

translate(x,y):定义 2D 转换。

translateX(x):定义转换,只是用 X 轴的值。

translateY(y):定义转换,只是用 Y 轴的值。

scale(x[,y]?) :定义 2D 缩放转换。

scaleX(x):通过设置 X 轴的值来定义缩放转换。

scaleY(y):通过设置 Y 轴的值来定义缩放转换。

rotate(angle):定义 2D 旋转,在参数中规定角度。

skew(x-angle,y-angle):定义沿着 X 和 Y 轴的 2D 倾斜转换。

skewX(angle):定义沿着 X 轴的 2D 倾斜转换。

skewY(angle):定义沿着 Y 轴的 2D 倾斜转换。


讲解代码

https://code.juejin.cn/pen/7129722615794499591


讲解代码操作步骤

演示代码都可通过代码复制拷贝到本地的 IDE 中进行演示。也可以自己照着敲击学习。

第一步:选中一个想查看代码的功能项;

第二步:将查看的功能的代码进行复制;

第三步:将代码粘贴到一个空档 html 文档中;

第四步:右键操作这个新建的 html 文档,选择在浏览器中打开,刚才的功能就在页面中出来啦。

一个小习题

上面的知识点都是有关 2D 效果的,如果我把一个鼠标垫放到桌子上,它虽然平铺在桌子上,但是不会改变它立体的视觉效果。如果放到浏览器上展示,平铺的效果一般只会看到鼠标垫的一个面。那么怎么实现一个立体的鼠标垫效果呢?解答方案会在下篇文章中给出。



总结

别人的专长是吹拉弹唱,transform 的特长是旋转,缩放,移动,倾斜。就在 transform 的旋转跳跃间,我们可以实现各式各样好玩的展示效果,希望今天这篇文章可以让大家挖掘更多好玩的创意。

有时候学习并不困难,如何应用是关键,所以,想要熟练的掌握前端知识,还需要不断的练习和应用。

前端的千变万化,源于对前端知识的融会贯通。

发布于: 刚刚阅读数: 4
用户头像

叶一一

关注

掘金优秀创作者 2022-09-01 加入

非职业传道受业解惑前端程序媛,华夏美食、国漫、古风重度爱好者,刑侦、无限流小说初级玩家。

评论

发布
暂无评论
「趣学前端」玩转CSS的2D转换,也许能有个代码纸片人_CSS_叶一一_InfoQ写作社区