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

相关推荐
知识分享小能手14 分钟前
Redis入门学习教程,从入门到精通,Redis 概述:知识点详解(1)
数据库·redis·学习
牛奶2 小时前
AI辅助开发最佳实践:2026年新方法
前端·aigc·ai编程
red_redemption2 小时前
自由学习记录(135)
学习
C澒3 小时前
微前端容器标准化:公共能力标准化
前端·架构
Setsuna_F_Seiei3 小时前
AI 对话应用之 JS 的流式接口数据处理
前端·javascript·ai编程
青柠代码录3 小时前
【Vue3】Vue Router 4 路由全解
前端·vue.js
金山几座3 小时前
C#学习记录-事件
开发语言·学习·c#
无限大64 小时前
《AI观,观AI》:专栏总结+答疑|吃透核心,解决你用AI的所有困惑
前端·后端
X在敲AI代码4 小时前
推荐系统学习 D1推荐系统核心概述
学习·推荐算法
我的xiaodoujiao4 小时前
API接口自动化测试详细图文教程学习系列1--序章
python·学习·pytest