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

相关推荐
|晴 天|4 小时前
Vue 3 + TypeScript + Element Plus 博客系统开发总结与思考
前端·vue.js·typescript
DeepModel4 小时前
通俗易懂讲透 Q-Learning:从零学会强化学习核心算法
人工智能·学习·算法·机器学习
猫3284 小时前
v-cloak
前端·javascript·vue.js
旷世奇才李先生4 小时前
Vue 3\+Vite\+Pinia实战:企业级前端项目架构设计
前端·javascript·vue.js
handler015 小时前
从零实现自动化构建:Linux Makefile 完全指南
linux·c++·笔记·学习·自动化
安小牛5 小时前
Android 开发汉字转带声调的拼音
android·java·学习·android studio
SoaringHeart6 小时前
Flutter进阶:用OverlayEntry 实现所有弹窗效果
前端·flutter
Hello_Embed6 小时前
嵌入式上位机开发入门(二十六):将 MQTT 测试程序加入 APP 任务
网络·笔记·网络协议·tcp/ip·嵌入式
不会编程的懒洋洋6 小时前
C# Task async/await CancellationToken
笔记·c#·线程·面向对象·task·同步异步
仙女修炼史7 小时前
CNN的捷径学习Shortcut Learning in Deep Neural Networks
人工智能·学习·cnn