案例---旋转中心点 

<!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 @   missSherry1014  阅读(29)  评论(0)  编辑  收藏  举报
相关博文：
· rotate案例--小三角
· 设置转换中心点 transform-origin
· css3-旋转木马
· WPF 图片围绕中心点旋转
· 缩放/动画变形的焦点
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示