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

相关推荐
芜青35 分钟前
HTML+CSS:浮动详解
前端·css·html
SchuylerEX1 小时前
第六章 JavaScript 互操(2).NET调用JS
前端·c#·.net·blazor·ui框架
东风西巷2 小时前
Rubick:基于Electron的开源桌面效率工具箱
前端·javascript·electron·软件需求
探码科技2 小时前
AI知识管理软件推荐:九大解决方案与企业应用
前端·ruby
编程小黑马2 小时前
解决flutter 在控制器如controller 无法直接访问私有类方法的问题
前端
Miracle_G2 小时前
每日一个知识点:JavaScript 箭头函数与普通函数比较
javascript
unfetteredman2 小时前
Error: /lib/x86_64-linux-gnu/libc.so.6: version `GLIBC_2.32' not found
前端·javascript·vite
云存储小精灵3 小时前
Dify x 腾讯云 COS MCP:自然语言解锁智能数据处理,零代码构建 AI 新世界
前端·开源
山间板栗3 小时前
微信小程序环境变量设置方案
前端
电商API大数据接口开发Cris3 小时前
Java Spring Boot 集成淘宝 SDK:实现稳定可靠的商品信息查询服务
前端·数据挖掘·api