关于transform的3D变形函数

本文详细介绍了CSS中3D转换(transform)的各种属性及用法,包括translate3d, scale3d, rotate3d等函数的应用,并解释了transform-origin, transform-style等属性的作用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  继续transform的3D用法:

  translate3d(x,y,z)定义3D转换

  transformX(x)只用x轴的值进行转换;

  transformY(y)只用y轴的值进行转换:

  transfornZ(z)只用z轴的值进行3d转换;

  scale缩放

  scale3d(x,y,z)定义3d的缩放

  scaleX(x)在x轴方向的缩放

  scaleY(y)在y轴方向进行缩放

  scaleZ(z)定义在z轴的方向进行缩放

  rotate旋转(deg角度)

  rotate3d(x,y,z,angle)定义3d的旋转

  rotateX(deg)定义x轴的旋转

  rotateY(deg) 定义y轴的旋转

  rotateZ(deg)定义Z轴的旋转

  matrix3d( n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定义3d的转换,使用16个4乘4的矩形的值来定位。

  transform-origin:作用和2d的一样,都是改变变形的起点 z轴是3d的特有表现

  transform-style:规定被嵌套的元素如何在3d环境下显示:

    flat表示不保留在子元素的3d空间

    preserve-3d表示保留子元素的3d空间

  perspective-origin:规定3D元素的底部位置;目前浏览器都不支持;

  backface-visibility:定义元素在不面对屏幕时是否可见;浏览器支持度不好。

转载于:https://www.cnblogs.com/l8l8/p/8016438.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值