transform-rotate旋轉

本文轉載自查看原文 2020-08-13 12:25 494 CSS

<!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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 transform rotate的旋轉中心如何設置 CSS transform中的rotate的旋轉中心怎么設置使用input range滑塊，控制元素transform rotate旋轉樣式關於css3圖片旋轉transform：rotate（）問題總結 CSS3 transform rotate（旋轉）鋸齒/元素抖動模糊的解決辦法 -moz-transform:rotate() 通過js獲取元素css3的transform rotate旋轉角度方法拒絕IE8-,CSS3 transform rotate旋轉動畫效果（支持IE9+/chrome/firefox）使用 SVG transform rotate 解決畫框中的數字跟隨旋轉的問題 transform:rotate()在ios上不生效的坑