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

相关推荐
尾善爱看海3 小时前
Vue 面试收官篇:SSR、性能优化落地、30 道高频面试题精讲(附标准答案)
前端·javascript·vue.js·面试·vue
小弥儿3 小时前
GitHub今日热榜 | 2026-09-15:AI 智能体与本地生成工具领跑
学习·开源
老当益壮梁奶奶3 小时前
51单片机DS18B20温度传感器详解:单总线时序与C51驱动实现
笔记·stm32·单片机·嵌入式硬件·51单片机
驳是4 小时前
一个组件,提升 react-router 开发的幸福感
前端·preact
susplus4 小时前
【初识ARM】ARM相关基础概念
学习·arm
GreenTea4 小时前
OpenAI Agents API 上手实测:一次调用把整个 agent loop 甩给 OpenAI
前端·后端·算法
星云API技术支持4 小时前
企业微信二次开发:群权限设置、成员管理与群资料维护的接口组合实践
java·前端·企业微信
XiHongShi20164 小时前
键盘大小写指示器(代替键盘灯)
学习·计算机
小叶肥辉4 小时前
LangChain链和LangGraph图的学习笔记【三】——分别用langchain_openai库和langchain_community库调用大模型
笔记·python·langchain
京东云开发者4 小时前
81.8 秒的视频,我们改了 15 个版本:一次纯 Codex 驱动的 AI-native 视频实践
前端·aigc