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

相关推荐
梦65011 分钟前
【前端实战】图片元素精准定位:无论缩放,元素始终钉在指定位置
前端·html·css3
AlexMercer101230 分钟前
【操作系统】操作系统期末考试 简答题 焚决
c语言·经验分享·笔记·操作系统
烟袅31 分钟前
一文搞懂 useRef:它到底在“存”什么?
前端·react.js
Knight_AL35 分钟前
Vue + Spring Boot 项目统一添加 `/wvp` 访问前缀实践
前端·vue.js·spring boot
前端er小芳42 分钟前
前端虚拟列表滚动功能实现与核心知识点详解
前端
wuhen_n42 分钟前
Promise状态机与状态流转
前端
3秒一个大43 分钟前
React 中的 useMemo 与 useCallback:性能优化的利器
前端·react.js
cj814044 分钟前
Node.js基本概念理解
前端·node.js
ohyeah44 分钟前
React 缓存三剑客:useMemo、useCallback 与 memo 的正确打开方式
前端·react.js
程序员爱钓鱼1 小时前
Node.js 编程实战:JWT身份验证与权限管理
前端·后端·node.js