css3 旋转八仙桌

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html {
            /*750px*/
            font-size: 13.333333333333333vw;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .wrap {
            width: 7.5rem;
            position: relative;
        }

        .w {
            position: absolute;
            top: 1rem;
            left: 1.45rem;
            width: 4.6rem;
            height: 4.6rem;
            animation: xzh infinite 15s linear;
        }

        .w span {
            position: absolute;
            display: inline-block;
            border: 1px solid red;
            font-size: .4rem;
            width: .6rem;
            height: .6rem;
            text-align: center;
        }

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

            50% {
                transform: rotate(180deg);
            }

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

<body>
    <div class="wrap">
        <div class="w">
            <span>乾</span>
            <span>坤</span>
            <span>震</span>
            <span>巽</span>
            <span>坎</span>
            <span>离</span>
            <span>艮</span>
            <span>兑</span>
        </div>
    </div>
</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
    for (var i = 0; i < 8; i++) {
        var deg = i * 45;
        var wz = ($('.w').outerWidth() - $('.w span').outerWidth()) / 200;
        var x = (Math.sin(deg * Math.PI / 180) + 1) * wz;
        var y = (Math.cos(deg * Math.PI / 180) + 1) * wz;

        $('.w span').eq(i).css({
            transform: 'rotate(' + i * 45 + 'deg)',
            top: x + 'rem',
            left: y + 'rem'
        });
    }
</script>

</html>
　　主要是sin和cos设置
css3 旋转 八仙桌

猜你喜欢
