css3之三维变换详说

rotateX和perspective

使用transform:rotateX(角度值); 可以沿着X轴旋转元素。此外,使用perspective属性可以对元素进行三维透视变换。

举个栗子:

3行元素的perspective属性值分别是100px、200px、300px。perspective-origin属性则用于移动透视原点的坐标位置。

rotateY和rotateZ

与rotateX同理,rotateY和rotateZ分别让元素沿着Y轴和Z轴进行旋转。

缩放

scaleX、scaleY和scaleZ是分别让元素沿着x轴、y轴和z轴上缩放元素的大小。当没有使用预设透视属性时,在z轴上缩放元素并不会改变他的外观。

移动

translateX、translateY和translateZ可以分别让元素在x轴、y轴和z轴上移动元素。需要注意的是,我们面向的是z轴的负方向。所以,当使用translateZ(200px)会让元素离我们更近,translateZ(-200px)则会让元素离我们更远。直观上的感受来说,元素看起来会相应的变大或者变小。

相关推荐
麦麦大数据11 分钟前
F051-vue+flask企业债务舆情风险预测分析系统
前端·vue.js·人工智能·flask·知识图谱·企业信息·债务分析
1024肥宅14 分钟前
现代 JavaScript 特性:ES6+ 新特性深度解析与实践
前端·javascript·面试
速易达网络22 分钟前
基于Java Servlet的用户登录系统设计与实现
java·前端·mvc
晨光321140 分钟前
Day34 模块与包的导入
java·前端·python
BD_Marathon1 小时前
Vue3_关于CSS样式的导入方式
前端·css
苹果电脑的鑫鑫1 小时前
vue和react缩进规则的配置项如何配置
前端·vue.js·react.js
BD_Marathon1 小时前
Vue3_工程文件之间的关系
前端·javascript·vue.js
weibkreuz1 小时前
模块与组件、模块化与组件化的理解@3
开发语言·前端·javascript
拾忆,想起1 小时前
单例模式深度解析:如何确保一个类只有一个实例
前端·javascript·python·微服务·单例模式·性能优化·dubbo
RealizeInnerSelf丶1 小时前
Web 网页如何唤起本地 Windows 应用并传递参数(含 Electron 自动注册 + 手动配置指南)
前端·windows