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

相关推荐
CCYe、5 分钟前
限流与配额:企业AI网关的工程实践
前端·人工智能
看谷秀12 分钟前
arkts- 6 手势/沉浸式/深浅色/性能/组件补充/访问/js交互/通知/Native交互
前端·arkts
划船不慎掉水顺便摸鱼15 分钟前
TipTap 不是编辑器,是编辑器构造器:ProseMirror 模型驱动的富文本架构
前端
小高00721 分钟前
🔥🔥🔥TypeScript 7 正式版来了:别只看 10 倍速度,这 4 个迁移坑更值得注意
前端·javascript·面试
凉茶社24 分钟前
shadcn/ui 默认改用 Base UI,Radix 被放弃了吗?
前端
Vuji26 分钟前
ReAct 与 Plan-Execute:两种 Agent 范式的实战对比
前端·agent
用户615958680002228 分钟前
从零原生搭建一个微前端简易框架
前端
小月土星29 分钟前
React + TypeScript 企业级开发实战:从类型约束到组件设计
前端
沙洲35 分钟前
Vite 环境变量终极指南:从原理到企业级实战
前端
依然范特东39 分钟前
强化学习笔记6--IS、PPO、TD、DQN、Actor-Critic
笔记·算法