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

相关推荐
洲星河ZXH2 分钟前
JavaWeb,前端工程化
前端
子兮曰4 分钟前
独立开发者主流技术栈(2026最新)
前端·后端·全栈
LeeeX!7 分钟前
【OpenClaw最新版本】 命令行备忘录:高频操作与实战技巧
笔记·aigc·openclaw
踩着两条虫13 分钟前
VTJ.PRO 新手入门:从环境搭建到 AI 生成首个 Vue3 应用
前端·javascript·数据库·vue.js·人工智能·低代码
KuaCpp14 分钟前
Linux从0到1学习
linux·学习
十有八七14 分钟前
Resume Agent P1 开发 — 记忆管理 + 用户配置 + 工具系统
前端·后端
羊群智妍18 分钟前
2026免费GEO工具,AI搜索优化一步到位
笔记
2601_9498161629 分钟前
Node.js npm 安装过程中 EBUSY 错误的分析与解决方案
前端·npm·node.js
tryqaaa_33 分钟前
学习日志(一)【含markdown语法,Linux学习】
linux·运维·学习·web安全·web·markdown
Leah-41 分钟前
Web项目测试流程
笔记·学习·web·测试·复盘