前端 CSS 属性transform 空间转换

技术拾荒者

已于 2024-09-05 02:12:43 修改

阅读量298

点赞数 10

文章标签：前端 css

于 2024-09-04 09:42:38 首次发布

本文链接：https://blog.csdn.net/weixin_53720617/article/details/141884275

版权

空间转换

空间：是从坐标轴角度定义的 X 、Y 和 Z 三条坐标轴构成了一个立体空间，Z 轴位置与视线方向相同。 l 空间转换也叫 3D转换 l 属性：transform
可以通过设置css属性改变空间的移动位置，旋转，缩放比例，倾斜度数。
transform 是一个符合属性，一个标签的属性不可以出现两个transform。可以发他们的值写在一些。

空间转换 – 平移

首先显示transform 的属性都有那些

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>空间-平移</title>
    <style>
        div{
            margin: 100px auto;
            width: 200px;
            height: 200px;
            background-color: pink;
            transition: all 0.5s;
        }

        div:hover{
            /* 电脑是平面，默认无法观察Z 轴平移 */
            /* transform: translate3d(100px,100px,50px); */

            /* 3d 小括号内必须是三个值 */
            /* 也可以单独写一个轴向位置 */
            transform: translateX(200px);

            transform: translateY(200px);

            /* transform: translateZ(200px); */
        }
    </style>
</head>
<body>
    <div>
    </div>
</body>

视距 perspective

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视距</title>
    <style>
        /* 视距属性必须添加 直接父级 */
        .father{
            perspective: 1000px;
        }

        .son{
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: pink;
            transition:all .5s;
        }

        .son:hover{
            transform: translateZ(300px);
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">

        </div>
    </div>
</body>

空间 – 旋转

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>空间旋转-Y轴</title>
    <style>
        .box{
            width: 300px;
            margin: 100px auto;
        }
        
        .box img{
            transition: all 2s;
        }

        .box{
            /* 透视效果:近大远小，近实远虚 */
            perspective: 1000px;
        }

        .box img:hover{
            transform: rotateY(180deg);
            transform: rotate3d();
        }

    </style>
</head>
<body>
    <div class="box">
        <img src="./images/h.jpeg" alt="">
    </div>
</body>

立体呈现 – transform-sty

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>立体呈现</title>
    <style>
        .box{
            position: relative;
            margin: 100px auto;
            width: 200px;
            height: 200px;
            /* 过度属性 */
            transition: all 2s;
            /* 这个是设置 空间模型的。 */
            transform-style: preserve-3d;
            /* 旋转与案例效果无关，用来看前后移动的效果 */
            /* transform: rotateY(89deg); */
        }

        .box div{
            position: absolute;
            left: 0;
            top: 0;
            height: 200px;
            width: 200px;
            border: 2px solid skyblue;
        }

        .box .front
        {
            background-color: orange;
            transform:translateZ(100px);
        }

        .box .back
        {
            background-color: green;
            transform:translateZ(-100px);
        }
        /* 但鼠标移到box 时，让box 延Y轴旋转90度。 */
        .box:hover{
            transform: rotateY(90deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="front"></div>
        <div class="back"></div>
    </div>
</body>
</html>

空间转换 – 缩放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航</title>
    <style>
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .nav{
            width: 200px;
            height: 40px;
            margin: 50px auto;
        }

        .nav ul{
            display: flex;
        }

        .nav li{
            /* 相对定位 */
            position: relative;

            width: 200px;
            height: 40px;
            line-height: 40px;
            transition: all 0.5s;
            /* 定义成空间， */
            transform-style: preserve-3d;

            /* 为了看到橙色和绿色的移动过程，给立方体添加旋转 */
            /* transform: rotateX(-20deg) rotateY(30deg); */
            
            /* 延X轴缩小0.5倍 */
            transform: scaleX(0.5);
            /* 延Y轴放大2倍 */
            transform: scaleY(2);
            /* Z轴放大3倍 */
            transform: scaleZ(3);
            /* X,Y,Z 三轴方向同时改变倍数。*/
            transform: scale3d(0.5,2,3);
        }

        .nav li a{
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            width: 100%;
            height: 100%;
            text-align: center;
            text-decoration: none;
            color: #fff;
        }

        .nav li a:first-child{
            background-color: green;
            transform: translateZ(20px);
        }

        .nav li a:last-child{
            background-color: orange;
            /* 第二个图片，先延X轴旋转90度，在延Z轴向上移动20px */
            transform: rotateX(90deg) translateZ(20px);
        }

        .nav li:hover{
            /* 延X轴旋转90deg, */
            transform: rotateX(-90deg);
           
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li>
                <a href="#">首页</a>
                <a href="#">Index</a>
            </li>
            <li>
                <a href="#">登录</a>
                <a href="#">Login</a>
            </li>
            <li>
                <a href="#">注册</a>
                <a href="#">Register</a>
            </li>
        </ul>
    </div>
</body>
</html>