transform 属性例子

transform属性：
scale(number)：等比例方大number倍。课用于导航栏鼠标悬浮在导航项上时使得导航项等比方大。

rotate(*deg):旋转。360deg=1turn=400grad。

skew(*deg):倾斜。

translate（X,Y）:移动。

transform-origin: top left：按某个顶点转动，默认中心为旋转点，这里设置为左上角为旋转点

使用例子
效果静态图：
image image

image image

<body>
  <div class="loading item1">
    <span>scale(1.5)等比例方大1.5倍</span>
  </div>
  <div class="loading item2">
    <span>rotate(-90deg)</span>
  </div>
  <div class="loading item3">
    <span>skew(30deg)</span>
  </div>
  <div class="loading item4">
    <span>translate()移动</span>
  </div>
  <div class="loading item2 item5">
    <p>rotate()+transform-origin按某个点转动</p>
  </div>
</body>

<style>
    .loading{
      margin: 0;
      padding: 0;
      width: 200px;
      height: 150px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #686de0;
      margin-top: 10%;
      margin-left: 50%;
      transition: transform 2s;
    }

    .item1:hover {transform: scale(1.5);}/*等比例方大1.5倍*/
    .item2:hover {transform: rotate(70deg);}/*rotate旋转 1turn=400grad=360deg*/
    .item3:hover {transform: skew(30deg);}
    .item4:hover {transform: translate(40px,40px);}
    .item5{transform-origin: top left;}
</style>
posted @ 2022-09-06 09:47  huangchun0121  阅读(63)  评论(0)    收藏  举报