各种父元素转换不影响子元素的案例代码

萧寂173
95 阅读3分钟

父元素3D转换,子元素不要跟随父元素3D转换(如父元素倾斜等,子元素保持原来效果)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transform Example</title>
<style>
  .parent {
    width: 200px;
    height: 200px;
    background-color: #f0f0f0;
    margin: 50px;
    transform: rotate3d(0.5, 0, 0.15, 70deg); /* 这个属性和下面那个属性必须是child的父元素才可以保证不影响子元素,如果这个类样式是child的祖先元素则子元素还是会有影响的 */
    transform-style: preserve-3d;
  }

  .child {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    /* 应用一个相反方向的3D旋转来抵消父元素的旋转效果 */
    transform: rotate3d(-0.5, 0, -0.15, 70deg);
  }
</style>
</head>
<body>

<div class="parent">
  <div class="child">
  </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>Document</title>
    <style>
        .father {
            width: 500px;
            height: 500px;
            position: relative;
            overflow: hidden;
        }

        .father-1 {
            width: 50px;
            height: 50px;
            position: absolute;
            left: calc(50% - 25px);
            top: calc(50% - 25px);
            border: 1px solid;
            border-radius: 50%;
            transform: rotate(72deg);
            animation: spin1 1s linear infinite;
        }

        .father-2 {
            width: 100px;
            height: 100px;
            position: absolute;
            left: calc(50% - 50px);
            top: calc(50% - 50px);
            border: 1px solid;
            border-radius: 50%;
            transform: rotate(144deg);
            animation: spin2 2s linear infinite;
        }

        .father-3 {
            width: 150px;
            height: 150px;
            position: absolute;
            left: calc(50% - 75px);
            top: calc(50% - 75px);
            border: 1px solid;
            border-radius: 50%;
            transform: rotate(216deg);
            animation: spin3 3s linear infinite;
        }

        .father-4 {
            width: 200px;
            height: 200px;
            position: absolute;
            left: calc(50% - 100px);
            top: calc(50% - 100px);
            border: 1px solid;
            border-radius: 50%;
            transform: rotate(288deg);
            animation: spin4 4s linear infinite;
        }

        .father-5 {
            width: 250px;
            height: 250px;
            position: absolute;
            left: calc(50% - 125px);
            top: calc(50% - 125px);
            border: 1px solid;
            border-radius: 50%;
            transform: rotate(360deg);
            animation: spin5 5s linear infinite;
        }
        .son {
            width: 20px;
            height: 20px;
            margin-left: -10px;
            text-align: center;
            line-height: 20px;
            margin-top: calc(50% - 5px);
            background-color: red;
            border-radius: 50%;
        }
        /* 持续时间和速度跟父元素保持一致 */
        .son-1 {
            animation: spinson1 1s linear infinite;
        }
        .son-2 {
            animation: spinson2 2s linear infinite;
        }
        .son-3 {
            animation: spinson3 3s linear infinite;
        }
        .son-4 {
            animation: spinson4 4s linear infinite;
        }
        .son-5 {
            animation: spinson5 5s linear infinite;
        }


        @keyframes spin1 {
            0% {
                transform: rotate(72deg);
            }

            100% {
                /* 72deg + 360deg 下面也是同理 */
                transform: rotate(432deg); 
            }
        }
        /* 父元素转动时子元素保持向相反的方向转动即可保持不变 */
        @keyframes spinson1 {
            0% {
                transform: rotate(-72deg);
            }

            100% {
                transform: rotate(-432deg); 
            }
        }

        @keyframes spin2 {
            0% {
                transform: rotate(144deg);
            }

            100% {
                transform: rotate(504deg);
            }
        }
        @keyframes spinson2 {
            0% {
                transform: rotate(-144deg);
            }

            100% {
                transform: rotate(-504deg);
            }
        }

        @keyframes spin3 {
            0% {
                transform: rotate(216deg);
            }

            100% {
                transform: rotate(576deg);
            }
        }

        @keyframes spinson3 {
            0% {
                transform: rotate(-216deg);
            }

            100% {
                transform: rotate(-576deg);
            }
        }

        @keyframes spin4 {
            0% {
                transform: rotate(288deg);
            }

            100% {
                transform: rotate(648deg);
            }
        }

        @keyframes spinson4 {
            0% {
                transform: rotate(-288deg);
            }

            100% {
                transform: rotate(-648deg);
            }
        }

        @keyframes spin5 {
            0% {
                transform: rotate(360deg);
            }

            100% {
                transform: rotate(720deg);
            }
        }
        @keyframes spinson5 {
            0% {
                transform: rotate(-360deg);
            }

            100% {
                transform: rotate(-720deg);
            }
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="father-1">
            <div class="son son-1">1</div>
        </div>
        <div class="father-2">
            <div class="son son-2">2</div>
        </div>
        <div class="father-3">
            <div class="son son-3">3</div>
        </div>
        <div class="father-4">
            <div class="son son-4">4</div>
        </div>
        <div class="father-5">
            <div class="son son-5">5</div>
        </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>Document</title>
    <style>
        .navList {
            width: 689px;
            height: 41px;
            margin: 0 auto;
            padding: 14px 53px 12px 55px;
            background-color: red;
            transform: skew(-30deg);
        }

        .navList>a {
            display: inline-block;
            transform: skew(30deg);  /* 子元素倾斜一个方向跟父元素抵扣即可 */
            color: rgb(0, 97, 164);
            font-size: 14px;
        }
    </style>
</head>

<body>
    <nav class="navList">
        <a href="#">首页</a>
        <a href="#">关于我们</a>
        <a href="#">品牌产品</a>
        <a href="#">小捣蛋社区</a>
        <a href="#">加入我们</a>
    </nav>
</body>

</html>
avatar
文章
阅读
粉丝