当前位置：首页 > news >正文

前端转换笔记

news 2025/7/20 12:54:49

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>转换</title>
       <style>
           .box{
               /* 盒子摆在body的正中间 */
               position: absolute;
               top:50%;
               left: 50%;
               transform: translate(-50%,-50%);
               width: 300px;
               height: 300px;
               background-color: aqua;
               /* transform: translateX(50%) translateY(-50%); */

           }
           .box2{
               width: 200px;
               height: 200px;
               background-color: aquamarine;
               margin: auto;
               /transition: all 2s linear;/* 转换的中心点 */
               /* 方位词：水平方向(left,center,right) 垂直方向(top,center,bottom)
               */
               transform-origin: 50% 50%;
           }
           /* .box2:hover{ */
               /* scale()缩放 */
               /* transform: scaleX(.5); */
           /* } */
           .box2:hover{
               /* rotate: ():旋转deg度正数顺时针，负数逆时针;*/
               /* skew():倾斜 deg度*/
               transform: scale(2,.5);
               /* transform: scaleY(.6); */
           }
       </style>
   </head>
   <body>
       <div class="box"></div>
       <div class="box2"></div>
   </body>
</html>