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轴方向上位移效果是一样的

相关推荐
IT_陈寒13 分钟前
Vue的数组更新把我坑惨了
前端·人工智能·后端
于航26 分钟前
分层上下文压缩,幻觉检测,错误累积概要
前端
数据掘金28 分钟前
鸿蒙统计的权限弹窗怎么适配?
前端
田里的水稻29 分钟前
EI_模仿学习IL---工程链路
人工智能·深度学习·学习·机器学习·迁移学习
Linux-lucky30 分钟前
43-Linux学习之旅之Shell 脚本(二)
linux·运维·学习·ubuntu·dash
数据掘金31 分钟前
鸿蒙统计的多设备协同数据怎么打通?
前端
尘中远32 分钟前
Qwt7的曲线渲染平滑实现:高斯卷积、Savitzky-Golay 回归与特征保护
前端
XHGILY33335 分钟前
职业院校实习计划制定:科学规划与落地执行策略深度解析
学习
Xudde.1 小时前
CVE-2017-9993漏洞复现
笔记·学习·安全·web安全
程序员zgh1 小时前
C++ erase() 函数用法
c语言·开发语言·c++·学习