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

相关推荐
4***14901 小时前
Vue代码规范详解
javascript·vue.js·代码规范
黑幕困兽1 小时前
ehcarts 实现 饼图扇区间隙+透明外描边
前端·echarts
San301 小时前
深入理解 JavaScript 词法作用域链:从代码到底层实现机制
前端·javascript·ecmascript 6
进击的野人1 小时前
深入理解 JavaScript Promise:原理、用法与实践
javascript·面试·ecmascript 6
七淮2 小时前
Next.js SEO 优化完整方案
前端·next.js
e***19352 小时前
爬虫学习 01 Web Scraper的使用
前端·爬虫·学习
我有一棵树2 小时前
file 协议与 http 协议的区别:为什么本地 HTML 无法加载相对路径 JS,以及正确的解决方式
javascript·http·html
aircrushin2 小时前
TRAE SOLO 中国版,正式发布!AI 编程的 "Solo" 时代来了?
前端·人工智能
最初的黄昏2 小时前
flutter 集成flutter_Boost
前端
有意义2 小时前
JavaScript 词法作用域与闭包:从底层原理到实战理解
前端·javascript·面试