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

相关推荐
GISer_Jing10 小时前
AI驱动营销:业务技术栈实战(From AIGC,待总结)
前端·人工智能·aigc·reactjs
wdfk_prog10 小时前
[Linux]学习笔记系列 --[drivers][base]map
linux·笔记·学习
浅念-10 小时前
链表经典面试题目
c语言·数据结构·经验分享·笔记·学习·算法
石像鬼₧魂石11 小时前
Windows Server 2003 域控制器靶机搭建与渗透环境配置手册
linux·windows·学习
啥都会点的大秀11 小时前
声学仿真学习笔记
笔记·学习
好奇龙猫12 小时前
【AI学习-comfyUI学习-三十六节-黑森林-融合+扩图工作流-各个部分学习】
人工智能·学习
不会代码的小猴12 小时前
Linux环境编程第三天笔记
linux·笔记
狐5712 小时前
2026-01-18-LeetCode刷题笔记-1895-最大的幻方
笔记·算法·leetcode
GIS之路12 小时前
GDAL 实现影像裁剪
前端·python·arcgis·信息可视化
AGMTI12 小时前
webSock动态注册消息回调函数功能实现
开发语言·前端·javascript