2D与3D转换

依旧那个叶人

已于 2024-12-30 20:11:52 修改

阅读量183

点赞数 7

文章标签： 3d

于 2024-12-24 16:06:36 首次发布

本文链接：https://blog.csdn.net/2401_87282803/article/details/144409723

版权

斜切变形

将ransform属性的值设置为skew(),即可实现斜切变形

<!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>
        img{
            transform:skew(10deg,20deg);
            border: 1px solid #000;
        }
    </style>

</head>
<body>
    <img src="../images/youxi.jpg" alt="">
</body>
</html>

旋转变形

<!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>
        img{
            transform:rotate(10deg);
            border: 1px solid #000;
        }
    </style>

</head>
<body>
    <img src="../images/youxi.jpg" alt="">
</body>
</html>

transform-origin

<!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>
        img{
            transform-origin: 0 100;
            transform:rotate(10deg);
            border: 1px solid #000;
        }
    </style>

</head>
<body>
    <img src="../images/youxi.jpg" alt="">
</body>
</html>

transform-origin:水平竖直;

缩放变形

<!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>
        img{
            transform-origin: 0 100;
            transform:rotate(10deg);
            border: 1px solid #000;
        }
        img:hover{
            transform:scale(3);
        }
    </style>

</head>
<body>
    <img src="../images/youxi.jpg" alt="">
</body>
</html>

位移变形

<!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: 200px;
            height: 220px;
            border: 1px solid #000;
            background-color: orange;
        }
        .box2{
            width: 200px;
            height: 220px;
            border: 1px solid #000;
            background-color: green;
            transform: translate(300px,300px);
        }
        .box3{
            width: 200px;
            height: 220px;
            border: 1px solid #000;
            background-color: blue;
        }
    </style>

</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

3D旋转

x绕后面转，y绕右转

perspective属性

perspective属性值越小越明显

<!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>
        *{
            padding: 0;
            margin: 0;
        }
        .box1{
            width: 202px;
            height: 202px;
            border: 1px solid #000;
            background-color:white;
            perspective: 200px;
            margin: 50px auto;
        }
       .box1 p{
            width: 200px;;
            height: 200px;
            border: 1px solid #000;
            background-color:orange;
            transform:rotateX(30deg) ;
        }
        .box2{
            width: 202px;
            height: 202px;
            border: 1px solid #000;
            background-color:white;
            perspective: 200px;
            margin: 50px auto;
        }
       .box2 p{
            width: 200px;;
            height: 200px;
            border: 1px solid #000;
            background-color:orange;
            transform:rotatey(30deg) ;
        }
        .box3{
            width: 202px;
            height: 202px;
            border: 1px solid #000;
            background-color:white;
            perspective: 200px;
            margin: 50px auto;
        }
       .box3 p{
            width: 200px;;
            height: 200px;
            border: 1px solid #000;
            background-color:orange;
            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>

正方向向后仰，y右肩向前扭动，rotatez与rotate是一样的

空间移动

注意3D旋转后的移动为空间移动，translatey往屏幕里面移动

translatez是往面朝的方向移动

<!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>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            margin: 100px auto;
            perspective: 300px;
            position: relative;
        }
        .box p{
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
        }
        .box p:nth-child(1){
            /* 前面 */
            transform: translatez(100px);
            background-color: rgba(219, 56, 211, 0.486);
        }
        .box p:nth-child(2){
            /* 顶面 */
            transform:rotatex(90deg) translatez(100px);
            background-color: rgba(91, 56, 219, 0.884);
        }
        .box p:nth-child(3){
            /* 后面 */
            transform: rotatex(180deg) translatez(100px);
            background-color: rgba(205, 219, 56, 0.486);
        }
        .box p:nth-child(4){
            /* 底面 */
            transform: rotatex(-90deg) translatez(100px);
            background-color: rgba(52, 11, 20, 0.724);
        }
        .box p:nth-child(5){
            /* 左面 */
            transform: rotatey(-90deg) translatez(100px);
            background-color: rgba(62, 219, 56, 0.68);
        }
        .box p:nth-child(6){
            /* 右面 */
            transform: rotatey(90deg) translatez(100px);
            background-color: rgba(251, 200, 142, 0.975);
        }
    </style>

</head>
<body>
    <div class="box">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
</body>
</html>