transform常用属性3d

最新推荐文章于 2024-09-06 13:58:20 发布

小杨样样扬

最新推荐文章于 2024-09-06 13:58:20 发布

阅读量495

点赞数

文章标签： 3d transform

本文链接：https://blog.csdn.net/weixin_44463600/article/details/98484427

版权

transform:rotate属性绕轴旋转度数：

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
body{
  transform-style:preserve-3d;
  position: relative;
      }
   div{
     color:rgb(47, 70, 3);
     width:100px;
     height:100px;
     position: absolute;
     top:200px;
     left:300px;
     background:rgb(215, 179, 240);
transition:1s;
   }   
    body div:hover{
     transform:rotate(45deg);/*改变的属性*/
   }
      
</style>
  </head>
  <body>
    <div>transform:</div>
  </body>
</html>

rotatez（）

在这里插入图片描述

rotatex（）

在这里插入图片描述

rotatey()

在这里插入图片描述
transform:scale属性放大倍数：

scalex()

在这里插入图片描述

scaley()

在这里插入图片描述

transform:translate属性移动px等：

translatex()

在这里插入图片描述

translatey()

在这里插入图片描述

translatez相当于z-index改变层级数

在这里插入图片描述

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
body{
  transform-style:preserve-3d;
  position: relative;
      }
   div{
     color:rgb(47, 70, 3);
     width:100px;
     height:100px;
     position: absolute;
     top:200px;
     left:300px;
     background:rgb(215, 179, 240);
transition:1s;
   }   
    body div:hover{
     transform:translate(45px,45px);/*设置的transform属性*/
     opacity:0.8;
     background:pink;
   }
      
</style>
  </head>
  <body>
    <div>transform:</div>
    <div>transform:</div>
  </body>
</html>