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

相关推荐
Focus_几秒前
SSE+broadcastChannel
前端
zabr2 分钟前
前端已死?我用 Trae + Gemini 零代码手搓 3D 塔罗牌,找到了新出路
前端·人工智能·aigc
Aotman_4 分钟前
Vue MutationObserver 监听
前端·javascript·vue.js·elementui·前端框架·ecmascript
专注前端30年7 分钟前
Vue3的生命周期钩子有哪些变化?
前端·javascript·vue.js
一 乐24 分钟前
健身房预约|基于springboot + vue健身房预约小程序系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端·学习·小程序
sbc-study25 分钟前
comsol学习-碱性电解槽堆中的分流-电化学,水解电槽,碱性
学习·comsol·电解槽·碱性·非局部耦合算子
wdfk_prog35 分钟前
[Linux]学习笔记系列 -- [fs]kernfs
linux·笔记·学习
代码游侠42 分钟前
学习笔记——IO多路复用技术
linux·运维·数据库·笔记·网络协议·学习
VcB之殇1 小时前
popstate监听浏览器的前进后退事件
前端·javascript·vue.js
宁雨桥1 小时前
Vue组件初始化时序与异步资源加载的竞态问题实战解析
前端·javascript·vue.js