3D变换、、

最新推荐文章于 2024-07-03 23:56:01 发布

半夜删你代码·

最新推荐文章于 2024-07-03 23:56:01 发布

阅读量97

点赞数

分类专栏：笔记文章标签：前端

本文链接：https://blog.csdn.net/m0_60376759/article/details/124133820

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

transform-style 指定某元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。

flat： (默认)指定子元素位于此元素所在平面内
preserve-3d：指定子元素定位在三维空间内

决定一个变换元素看起来是处在三维空间还是平面内，需要该元素的父元素上定义 transform-style 属性。

perspective 景深，指定观察者与「z=0」平面的距离，使具有三维位置变换的元素产生透视效果。

none：不指定透视（默认值）
<length> ：指定观察者距离「z=0」平面的距离，为元素及其内容应用透视变换。不允许负值。「z>0」的三维元素比正常大，而「z<0」时则比正常小。

3D位移

translateZ() 指定对象Z轴的平移

translate3d(x, y, z)

指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略

3D缩放

scaleZ() 指定对象的z轴缩放

scale3d() 指定对象的3D缩放。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略

3D旋转

rotatex() 指定对象在x轴上的旋转角度

rotatey() 指定对象在y轴上的旋转角度

rotatez() 指定对象在z轴上的旋转角度

3D多重变换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .wrapper {
            margin: 100px auto;
            width: 200px;
            height: 200px;
            border: 4px dashed #f90;

            /* 开启 3D 空间 */
            transform-style: preserve-3d;
            /* 设置景深 观察者与屏幕的距离 */
            perspective: 500px;
        }
        .box {
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            font-size: 30px;
            color: #fff;
            background-color: rgba(0, 255, 0, .5);
        }
        .box04 {
            transform: rotateX(45deg) translateZ(100px);

            box-shadow: 2px 2px 15px red;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="box box04">
            多重变换
        </div>
    </div>
</body>
</html>

一般设置绕X轴或者Y轴旋转，translateZ 距离Z轴的距离，可出现翻转效果

设置观察者位置

perspective-origin 设置透视点的位置，给父元素设置

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

取值：left right center <lenght> <percentage> top bottom center <lenght> <percentage>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .wrapper {
            margin: 100px auto;
            width: 200px;
            height: 200px;
            border: 4px dashed #f90;

            transform-style: preserve-3d;
            perspective: 500px;
            perspective-origin: 100px 300px;
        }
        .box {
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            font-size: 30px;
            color: #fff;
            background-color: rgba(0, 255, 0, .5);

            transform: rotateX(45deg);
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="box">
            立体
        </div>
    </div>
</body>
</html>

perspective-origin （值1 值2）

当值1等于宽度的一半是，观看位置在正中间

perspective-origin: 100px 50px;

为负值时，视线在右边

perspective-origin: -500px 50px;

大于宽度一半时，视线在左边

perspective-origin: 500px 50px;

值2 正值在上方，负值在下方

背面是否可见

指定元素背面面向用户时是否可见。

visible： (默认)指定元素背面可见，允许显示正面的镜像。 hidden：指定元素背面不可见
决定一个元素背面面向用户时是否可见，需要直接在该元素上定义 backface-visibility 属性，而不能在其父元素上，因为该属性默认为不可继承。

案例：扑克牌转换

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>13_3D变换-背面是否可见</title>
        <style>
            .wrapper{
                width: 400px;
                height: 500px;
                transform-style: preserve-3d;
                perspective: 5000px;
            }
            .box{
                transform-style: preserve-3d;
                perspective: 5000px;
                /* 让box慢慢的变换 */
                transition: transform 2s;
            }

            .box:hover{
                /*鼠标滑过盒子，盒子进行翻转*/
                transform: rotateY(180deg);
            }

            .wrapper .box img{
                width: 400px;
                height: 500px;
            }

            .face{
                position: absolute;
                left: 0;
                top:0;
                /*当face翻转到背面时隐藏*/
                backface-visibility: hidden;
                
            }
            .back{
                /*back翻转180deg*/
                transform: rotateY(180deg);
            }

        </style>
    </head>
    <body>
        <!-- 旋转
             hover
             3d
             定位
            
             慢慢的翻过去
             背面隐藏-->

        <div class="wrapper">
            <div class="box">
                <img src="images/a.jpg" class="back" alt="">
                <img src="images/b.jpg" class="face" alt="">
            </div>
        </div>
    </body>
</html>

半夜删你代码·

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3D变换、、

transform-style 指定某元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。 flat： (默认)指定子元素位于此元素所在平面内 preserve-3d：指定子元素定位在三维空间内决定一个变换元素看起来是处在三维空间还是平面内，需要该元素的父元素上定义 transform-style 属性。 perspective 景深，指定观察者与「z=0」平面的距离，使具有三维位置变换的元素产生透视效果。 none：不指定透视（默认值） .
复制链接

扫一扫