CSS学习笔记:空间转换——使用transform属性实现元素在空间内的位移、旋转、缩放等效果

透视

使用perspective属性实现透视效果

什么是透视:近大远小,近实远虚

说明:perspective的值指的是透视距离,透视距离也称为视距,所谓的视距就是人的眼睛到屏幕的距离

立体呈现

transform-style: preserve-3d

perspective与transform-style:preserve-3d的区别

perspective是可以给图像呈现立体感,但那仅仅只是一种3D的视觉感受,并没有真正的在3D环境中

transform-style:preserve-3d则是让元素处在了3D空间

一个是假3D一个是真3D,一个只是实现视觉效果,一个是让元素处于3D空间中,让元素有了立体感

位移

旋转

不是只有学物理才能用左手法则,学计算机也能用!

拓展:自定义x,y,z轴之外的其他旋转轴------极少用到,了解即可

缩放

缩放和在Z轴方向上位移效果是一样的

相关推荐
silvamux_37 分钟前
10款模型写种草笔记:可发布性、返工来源与成本数据缺口复盘
java·数据库·笔记
米米商聊1 小时前
同名附件为什么被 Map 覆盖?重复键与一对多索引
前端·javascript
蒸蒸yyyyzwd1 小时前
kafka、redis、mysql不熟悉问题总结
笔记·八股
hgy89691 小时前
深度学习(小白笔记)——迁徙
人工智能·笔记·深度学习
摇滚侠2 小时前
《On Java 中文版 基础卷》阅读笔记 实现隐藏 11
java·笔记·python
echome8882 小时前
Python 异常处理:try、else、finally 的正确搭配
开发语言·前端·python·异常处理·编程技巧
时间的情敌2 小时前
OpenLayers 实战|Vue3 + OpenLayers 完整工程案例(加载天地图、要素、弹窗、绘制、WFS)
前端·openlayers
陈随易2 小时前
下载神器!Motrix 停更三年后重写回归
前端·后端·程序员
前端的日常3 小时前
一个人+AI做情侣食谱小程序,0 费用的服务器
前端·后端
辣知3 小时前
辣知·化智93 被历史尘封的鬻子
学习