css3之3D属性

最新推荐文章于 2024-05-27 13:05:37 发布

迷失的风景web

最新推荐文章于 2024-05-27 13:05:37 发布

阅读量235

点赞数

本文链接：https://blog.csdn.net/qq_44193048/article/details/105768488

版权

在之前的一篇文章我只说了2D现在来说说3D。
1.translate 位移
translateX(): 指定X轴的位移;
translateY(): 指定Y轴的位移;
translateZ(): 指定Z轴的位移;
translate3D(): 第一个参数指定X轴的位移量, 第二个参数指定Y轴的位移量, 第三个参数指定Z轴的位移量, 3个参数缺一不可;（这里是指3D）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 100px;
            left: 100px;
            perspective: 1000px;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 100px;
            left: 100px;
            transform-style: preserve-3d;
            transform-origin: 0% 50%;
            perspective: 1000px;
            transform: translate3D(100px, 100px, 100px);
        }
    </style>
</head>

<body>
    <div class="box1">没偏移的元素</div>
    <div class="box2">偏移的元素</div>
</body>

</html>

在这里插入图片描述
2.rotate 旋转
rotateX(): 指定X轴的旋转角度;
rotateY(): 指定Y轴的旋转角度;
rotateZ(): 指定Z轴的旋转角度;
rotate3D(): 3D旋转，必须指定四个参数，前3个参数分别表示旋转的方向x y z, 第4个参数表示旋转的角度;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 100px;
            left: 100px;
            perspective: 1000px;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 200px;
            left: 200px;
            transform-style: preserve-3d;
            transform-origin: 0% 50%;
            perspective: 1000px;
            transform: rotate3D(20, 20, 20, 180deg);
        }
        .box2:hover{
            transform: rotate3D(20, 20, 20, 180deg);
        }
    </style>
</head>

<body>
    <div class="box1">没旋转的元素</div>
    <div class="box2">旋转的元素</div>
</body>

</html>

在这里插入图片描述
3.scale 缩放
scaleX(): 指定X轴的缩放倍数;
scaleY(): 指定Y轴的缩放倍数;
scaleZ(): 指定Z轴的缩放倍数;
scale3D(): 第一个参数指定X轴的缩放倍数, 第二个参数指定Y轴的缩放倍数, 第三个参数指定Z轴的缩放倍数, 3个参数缺一不可;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 100px;
            left: 100px;
            perspective: 1000px;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 300px;
            left: 300px;
            transform-style: preserve-3d;
            transform-origin: 0% 50%;
            perspective: 800px;
            transform: scale3D(1.5, 1.5, 1.5);
        }
    </style>
</head>

<body>
    <div class="box1">没缩放的元素</div>
    <div class="box2">缩放的元素</div>
</body>

</html>

在这里插入图片描述

迷失的风景web

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3之3D属性

在之前的一篇文章我只说了2D现在来说说3D。1.translate 位移translateX(): 指定X轴的位移;translateY(): 指定Y轴的位移;translateZ(): 指定Z轴的位移;translate3D(): 第一个参数指定X轴的位移量, 第二个参数指定Y轴的位移量, 第三个参数指定Z轴的位移量, 3个参数缺一不可;（这里是指3D）<!DOCTYPE ht...
复制链接

扫一扫