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

相关推荐
爱泡脚的鸡腿24 分钟前
uni-app D4 实战(小兔鲜)
前端·vue.js·架构
星火飞码iFlyCode25 分钟前
iFlyCode+SpecKit应用:照片等比智能压缩功能实现
前端·javascript
广白28 分钟前
钉钉小程序直传文件到 阿里云OSS
前端·vue.js·uni-app
IUGEI42 分钟前
【后端开发笔记】JVM底层原理-垃圾回收篇
java·jvm·笔记·后端
zyfts1 小时前
🔥告别 20 分钟等待!NestJS 生产级消息队列 BullMQ 实践指南
前端·后端
狗头大军之江苏分军1 小时前
【压力】一位一线炼钢工人的消失
前端·后端
摇滚侠1 小时前
Vue 项目实战《尚医通》,完成订单详情静态的搭建,笔记47
vue.js·笔记
('-')1 小时前
《从根上理解MySQL是怎样运行的》第五章学习笔记
笔记·学习·mysql
拉不动的猪2 小时前
文件下载:后端配置、前端方式与进度监控
前端·javascript·浏览器
Amy_yang2 小时前
前端实现 Server-Sent Events 全解析:从代码到调试的实战指南
前端·uni-app