HTML5基础加强css样式篇(css属性transform 函数(3D)transform-style)(二十五)

本文详细介绍了3D CSS变换的基本概念和技术要点,包括如何开启3D空间、3D变换函数的具体用法、z轴方向的理解、透视效果的设置、变换中心点的调整以及背面隐藏属性的应用。

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

上一篇说的是2D这一篇说3D(3D空间思维不好的请自行绕过)

1.打开3D空间:

   transform-style:

   ①可选值:flat(2D默认值) ,preserve-3d  (3D)

   

2.函数方法同2D的函数方法,多个参数例子为:scale(x,y)=>scale(x,y,z), scaleX(x)=>scaleZ(z);

3.z轴贯穿屏幕,屏幕外为正值;

4.景深和景深中心点:

  (1)perspective: number | none;
   ①默认值: 0
   ②元素距离视图的距离,以像素计。
  (2)perspective-origin: x-axis y-axis
   ①默认值:50% 50%
   ②注意:景深中心点必须与 perspective 属性一同使用。
   



5.变换中心点:
   (1)transform-origin: x-axis y-axis z-axis;
    ①3D变换的中心点
    ②默认值:50% 50% 0
   注意:z-axis 一定不要使用%!!! 屏幕内负值,反之为正值。
6.背景显示:
(1)backface-visibility: visible|hidden;
          ①visible      背面是可见的。
          ②hidden     背面是不可见的。
注:当一个元素设置了 rotateY(180deg),相当与对元素进行“翻面”,此时如果设置了backface-visibility: visible此时该元素不可见。




   

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

咸鸭蛋炒饭

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值