css2D与3D转换

最新推荐文章于 2024-03-19 20:30:55 发布

LiM .YOon A

最新推荐文章于 2024-03-19 20:30:55 发布

阅读量89

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_45716607/article/details/116236290

版权

前端专栏收录该内容

69 篇文章 0 订阅

订阅专栏

1 旋转变形

  .pic5{
            transform: rotate(360deg);
        }

        .pic6{
            /* 以左上角为中心点进行旋转 */
            transform-origin:0 0;
            transform: rotate(30deg);
        }

2缩放变形

.pic2{
            transform: scale(0.2);
     }

3斜切变形

   img{
            transform: skew(10deg,20deg);
        }

4 位移变形

 .box2{
            width: 200px;
            height: 200px;
            background-color: blue;
            /* border: 2px solid #000; */
            transform: translate(400px,100px);
        }

5 3D旋转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D旋转</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        p{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            background-color: orange;
        }

        .box1{
            width: 202px;
            height: 202px;
            border: 1px solid #000;
            /* perspective属性用来定义透视强度，可以理解为“人眼到舞台的距离，单位是px” */
            perspective: 300px;
            margin: auto 50%;
        }

        .box1 p{
            transform: rotateX(30deg);
        }

        .box2{
            width: 202px;
            height: 202px;
            border: 1px solid #000;
            perspective: 300px;
            margin: auto 50px;
        }

        .box2 p{
            transform: rotateY(30deg);
        }

        .box3{
            width: 202px;
            height: 202px;
            border: 1px solid #000;
            perspective: 300px;
            margin: auto 50px;
        }

        .box3 p{
            transform: rotateX(30deg) rotateY(30deg);
        }
    </style>
</head>
<body>
    <div class="box1">
        <p></p>
    </div>

    <div class="box2">
        <p></p>
    </div>

    <div class="box3">
        <p></p>
    </div>
</body>
</html>

6空间移动

。<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>空间移动</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        p{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            background-color: orange;
        }

        .box1{
            width: 202px;
            height: 202px;
            border: 1px solid #000;
            /* perspective属性用来定义透视强度，可以理解为“人眼到舞台的距离，单位是px” */
            perspective: 300px;
            margin: auto 50%;
        }

        .box1 p{
            transform: rotateX(30deg) translateX(100px) translateY(100px) translateZ(100px);
        }

        .box2{
            width: 202px;
            height: 202px;
            border: 1px solid #000;
            perspective: 300px;
            margin: auto 50px;
        }

        .box2 p{
            transform: rotateY(30deg);
        }

        .box3{
            width: 202px;
            height: 202px;
            border: 1px solid #000;
            perspective: 300px;
            margin: auto 50px;
        }

        .box3 p{
            transform: rotateX(30deg) rotateY(30deg);
        }
    </style>
</head>
<body>
    <div class="box1">
        <p></p>
    </div>

    <div class="box2">
        <p></p>
    </div>

    <div class="box3">
        <p></p>
    </div>
</body>
</html>