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)则会让元素离我们更远。直观上的感受来说,元素看起来会相应的变大或者变小。

相关推荐
Java手札10 分钟前
安装如下依赖(package.json 未包含):vueelement-plusecharts@element-plus/icons-vue
前端·javascript·vue.js
EndingCoder15 分钟前
Three.js + AI:结合 Stable Diffusion 生成纹理贴图
开发语言·前端·javascript·人工智能·stable diffusion·ecmascript·three.js
haruma sen19 分钟前
VUE前端
前端
汪叽家的兔子羡20 分钟前
vue模块化导入
前端·javascript·vue.js·typescript·vue3·vue2·vite
植物系青年26 分钟前
300 行代码!手把手教你写一个简版 Vue3 框架 📣
前端·vue.js
秉承初心27 分钟前
Vue3与ES6+的现代化开发实践(AI)
前端·vue.js·es6
Spirited_Away32 分钟前
脚手架开发之多包管理(npm, yarn, pnpm workspaces)
前端·面试
iaku34 分钟前
🔥React高级特性实战:错误边界、Portals与Refs进阶
前端·react.js·trae
薛定谔的猫237 分钟前
type-challenges系列(番外):技巧与知识点
前端·typescript
tiantian_cool43 分钟前
Xcode 导入与使用 SVG 文件矢量图适配全流程
前端