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 旋转八仙桌

最新文章

热门文章

巴特西

css3 旋转 八仙桌

最新文章

热门文章

css3 旋转八仙桌
