transform-rotate旋转

作者: 琪33 | 来源:发表于2018-04-26 16:11 被阅读0次

 <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: red;
            margin:100px auto;

            transition:all 1s;
            color:#fff;
            font-size:50px;

        }
        /* rotate（角度） 旋转
            正值 顺时针
            赋值：逆时针
        */
        .box:hover{
            transform:rotate(-945deg);
        }
        .out{
            width: 300px;
            height: 150px;
            background-color: pink;
            margin-top:200px;
            position: relative;
        }
        .out::before{
            content:"";
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: pink;
            transform:rotate(45deg);
            left:40%;
            top:-15px;
        }
    </style>
</head>
<body>
    <div class="box">1</div>
    <div class="out">
    </div>
</body>