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

相关推荐
小徐_23333 分钟前
AI 写 wot-ui 总在猜 API?我们把 Skills、MCP 和 CLI 都配好了
前端·uni-app·ai编程
winfredzhang7 分钟前
用 wxPython + ECharts + 阿里矢量地图,做一个可离线兜底的上海雨量看板
前端·javascript·echarts
索西引擎19 分钟前
【React】Immer.js 在现代 Redux 生态中的角色:不可变性保障的工程化实现与开发体验优化
前端·javascript·react.js
kisshyshy21 分钟前
《川剧变脸 × React 状态管理?我在浏览器里跑了个端侧大模型》
前端·react.js·架构
只一22 分钟前
端侧AI实战第二章:React组件工程化 + 事件系统 + 可复用进度条(WebGPU模型加载底座)
前端·react.js
只一29 分钟前
拿捏大模型输出随机性:Temperature、Top-K 原理 + LangChain 工程落地实战
javascript·langchain
大卫陈31 分钟前
微信小程序虚拟支付实战:从「支付能力被限制」到沙箱调通的全过程
前端·后端
武子康31 分钟前
vLLM 0.25.1:服务没有报错,为什么仍会生成垃圾 Token(5 级正确性门禁 + 自动回滚条件)
前端·人工智能·后端
jyp2012110735 分钟前
Vue3 Diff 算法
前端·vue.js
胡萝卜术39 分钟前
抽象的三级跳:从原生 DOM 到 React 组件树,我们到底在解决什么问题?
前端·javascript·面试