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

相关推荐
ct9787 分钟前
vue2 + vue3差异点
前端·javascript·vue.js
xuhaoyu_cpp_java7 分钟前
项目学习(一)逆向工程学习
经验分享·笔记·学习
nashane11 分钟前
HarmonyOS 6学习:HAR包跨平台编译陷阱与架构优化实战
学习·华为·harmonyos
小徐_233317 分钟前
程序员每天盯屏 10 小时,我开始认真研究“专业编程屏”这件事
前端
悟空瞎说27 分钟前
Git 协作工作流详解:从个人单打独斗到规模化团队协同
前端·git
颜进强29 分钟前
20-Spec-Kit Tasks 是怎么把技术方案拆成可执行任务的?
前端·后端·ai编程
程序员鱼皮30 分钟前
Cursor 零基础实战教程,夯爆了!带你速通 6 大核心能力
前端·后端·ai编程
颜进强31 分钟前
14-Spec-Kit、SDD 和 OpenSpec 到底有什么区别?其实核心思想都一样:先写清楚,再让 AI 干活
前端·后端·ai编程
颜进强31 分钟前
16-Spec-Kit 是什么?先从整体流程机制讲起
前端·后端·ai编程
悟空瞎说34 分钟前
QML 集成 WebView 开发桌面内嵌浏览器实战
前端