transform-rotate旋转

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <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>
</html>