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

相关推荐
玫城6 小时前
[ VUE ] 封装通用数组校验组件,el-input内使用
前端·javascript·vue.js
浩瀚地学7 小时前
【Java】JDK8的一些新特性
java·开发语言·经验分享·笔记·学习
JeffDingAI7 小时前
【Datawhale学习笔记】深入大模型架构
笔记·学习
暖阳之下8 小时前
学习周报三十一
学习
a不是橘子8 小时前
03在Ubuntu中验证PV操作
笔记·ubuntu·操作系统·虚拟机·os·pv操作
tangyal8 小时前
渗透笔记1
笔记·网络安全·渗透
fanged9 小时前
STM32(5)--HAL1(TODO)
笔记
Master_oid9 小时前
机器学习29:增强式学习(Deep Reinforcement Learning)④
人工智能·学习·机器学习
楼田莉子10 小时前
Linux学习之磁盘与Ext系列文件
linux·运维·服务器·c语言·学习
一条闲鱼_mytube10 小时前
智能体设计模式(三)多智能体协作-记忆管理-学习与适应
人工智能·学习·设计模式