css基础--2D、3D转换

最新推荐文章于 2023-03-30 13:10:07 发布

原创最新推荐文章于 2023-03-30 13:10:07 发布 · 320 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css #css3 #3d

web前端基础学习同时被 2 个专栏收录

80 篇文章

订阅专栏

css学习

12 篇文章

订阅专栏

本文详细介绍了CSS中的2D和3D转换，包括translate、rotate、scale、skew等方法，以及transform-origin、transform-style、perspective等属性的使用。通过实例展示了如何进行元素的平移、旋转、缩放和扭曲，同时探讨了3D转换中的translate3d、rotate3d、scale3d等，并提到了perspective和backface-visibility属性在3D效果中的重要性。这些技术广泛应用于网页和交互设计中，以实现丰富的视觉效果。

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

backface-visibility属性

2D转换

transform属性

none：无转换

平移

translate(<length>[, <length>])：指定对象的2D平移。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0

translateX(<length>)：指定对象X轴（水平方向）的平移

translateY(<length>)：指定对象Y轴（垂直方向）的平移

注：正数代表向右/下平移，负数代表向左/上平移

    div{
        width: 200px;
        height: 200px;
        background-color: aqua;
        transform: translate(50%,30px); /*这里的百分比是相对本身而言的，例如本例，50%=100px*/
    }

旋转

rotate(<angle>)：指定对象的2D旋转，需先有transform-origin属性的定义

注：单位为deg。正数为顺时针旋转，负数为逆时针旋转

         transform: rotate(50deg);

缩放

scale(<number>[, <number>])：指定对象的2D缩放。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值

scaleX(<number>)：指定对象X轴的（水平方向）缩放

scaleY(<number>)：指定对象Y轴的（垂直方向）缩放

注：若是正数，大于1则进行放大，小于1则进行缩小（.5=0.5=缩小到原有的1/2）若是负数（文字/图片）进行反转然后对应缩放

        transform: scale(.7);

斜切扭曲

skew(<angle> [, <angle>])：指定对象斜切扭曲。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0

skewX(<angle>)：指定对象X轴的（水平方向）扭曲

skewY(<angle>)：指定对象Y轴的（垂直方向）扭曲

        transform: skew(10deg,10deg);

综合使用

matrix() ：以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵。可接受六个参数，其中包括数学函数，可以旋转、缩放、移动（平移）和倾斜元素。

参数如下：matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

        transform: matrix(1,-0.3,0,1,0,0);

transform-origin属性

作用：用以设置旋转元素的基点位置

transform-origin：x-axis y-axis;

默认值：50% 50% ，效果等同于center center

该属性提供2个参数值。
如果提供两个，第一个用于横坐标，第二个用于纵坐标。
如果只提供一个，该值将用于横坐标；纵坐标将默认为50%。

<percentage>：用百分比指定坐标值，可以为负值

<length>：用长度值指定坐标值，可以为负值

left：指定原点的横坐标为left

center①：指定原点的横坐标为center

right：指定原点的横坐标为right

top：指定原点的纵坐标为top

center②：指定原点的纵坐标为center

bottom：指定原点的纵坐标为bottom

        transform-origin: -25% bottom;
        transform: rotate(25deg);

3D转换

3D转换与2D转换大同小异，多定义了一个z轴的值

transform属性

none：无转换

平移

值	描述
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。

旋转

rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。

缩放

scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。

综合使用

matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)

定义 3D 转换，使用 16 个值的 4x4 矩阵。

transform-origin属性

transform-origin：x-axis y-axis z-axis;

x、y轴值都与2D转换相同，z轴只可以指定<length>值

transform-style属性

作用：指定嵌套元素如何在三维空间中呈现

transform-style:flat(默认)|preserve-3d;

flat(默认)：表示子元素在2D平面呈现

preserve-3d：表示子元素在3D平面呈现

perspective属性

作用：设置3D元素是怎样查看透视图

（定义时的perspective属性，是一个元素的子元素，透视图，而不是元素本身）

perspective:none(默认)|number；

none(默认)：与0相同，不设置透视

number：元素距离视图的距离，以像素计

perspective-origin属性

作用：设置3D 元素所基于的 X 轴和 Y 轴

（定义时的perspective -Origin属性，是一个元素的子元素，透视图，而不是元素本身）

perspective-origin：x-axis y-axis;

属性值与transform-origin属性值相同，这里不多加赘述

backface-visibility属性

作用：设置当元素背面向屏幕时是否可见

backface-visibility:visible(默认)|hidden;

visible(默认)：背面可见

hidden：背面不可见