日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

css實現div盒子旋轉

作者：禮小七 更新時間： 2022-11-09 編程語言 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box{
        margin: 0 auto;
        width: 100px;
        height: 400px;
        background-color: rgb(233, 13, 13);
        /* 要實現旋轉需要加過渡看效果 */
      transition: all 2s;   
        
    }
  .box:hover {
            transform:rotate(90deg)
            /* 90deg是順時針轉 */
            /* transform:rotate(-90deg) */
            /* -90deg是順時針轉 */

        }
</style>
<body>
    <div class="box">

    </div>
</body>
</html>

定義一個盒子box，加樣式，添加過渡看效果，不添加過渡效果會很快實現，無法辨別，

transition 通常和 hover 等事件配合使用。

原文鏈接：https://blog.csdn.net/lixiaoqidecsdn/article/details/122224845

欄目分類
最近更新