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

相关推荐
鹿衔`1 小时前
解决Flink on Yarn模式多Yarn Session会话提交
java·前端·flink
u***u6851 小时前
前端组件单元测试模拟,Jest mock函数
前端·单元测试
前端摸鱼匠1 小时前
Vue 3 的watchEffect函数:介绍watchEffect的基本用法和特点
前端·javascript·vue.js·前端框架·ecmascript
拉不动的猪2 小时前
基本数据类型Symbol的基本应用场景
前端·javascript·面试
p66666666682 小时前
【☀Linux驱动开发笔记☀】新字符设备驱动开发_02
linux·嵌入式硬件·学习
笨鸟笃行2 小时前
百日挑战——单词篇(第二十四天)
学习
_小九2 小时前
【开源】耗时数月、我开发了一款功能全面【30W行代码】的AI图床
前端·后端·开源
just小千2 小时前
HTML进阶——常用标签及其属性
前端·html
惜.己2 小时前
html笔记(一)
前端·笔记·html