案例---旋转中心点 

<!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>
    <style>
      div {
        overflow: hidden;
        /* 溢出部分隐藏 */
        margin: 100px auto;
        width: 200px;
        height: 200px;
        border: 1px solid black;
        background-color: aquamarine;
      }
      /* 有一个父盒子，用：：before */
      div::before {
        content: "嘿嘿";
        /* content是和before。after一起使用的 */
        /* 因为content是行内元素，可以把他转成块级元素 */
        display: block;
        /* 转为块级元素之后可以设置高度 */
        width: 200px;
        height: 200px;
        background-color: blueviolet;
        transform: rotate(180deg);
        transition: all 0.2s;
        /* 添加过渡动画 */
      }
      /* 鼠标经过div这个盒子的时候，副盒子要转回来 */
      div:hover::before {
        transform-origin: left bottom;
        /* 以左下角为转换中心 */
        transform: rotate(0deg);
      }
    </style>
  </head>
  <body>
    <div>sdja</div>
  </body>
</html>
posted @ 2022-03-16 21:52  missSherry1014  阅读(50)  评论(0)    收藏  举报