CSS3 transform转换

最新推荐文章于 2022-04-24 16:19:44 发布

Lhy@@

最新推荐文章于 2022-04-24 16:19:44 发布

阅读量603

点赞数

分类专栏： HTML/CSS/H5/JavaScript 文章标签： css3

本文链接：https://blog.csdn.net/Lhy_JL/article/details/114277961

版权

HTML/CSS/H5/JavaScript 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

2D转换：是改变二维坐标上的位置。

1、translate：移动效果，且不会影响其他盒子。

对行内元素没有效果

像同样有移动效果的方法：1、margin位移；2，position定位。都会影响其他盒子

语法：

transform:translate(x,y); //水平移动 x，垂直移动 y，

1、x=50px；

2、x=50%,自身宽度的50%，

应用场景：让一个盒子水平垂直居中

 .box3{
      position: relative;
      margin: 10px auto;
      width: 400px;
      height: 400px;
      border: seagreen solid 1px;
    }
    .box3 .son{
      position: absolute;
      top:50%;
      left:50%;
      width: 100px;
      height: 100px;
      background-color: #dad376;
      transform: translate(-50%,-50%);
    }

  <div class="box3">
    <div class="son"></div>
  </div>

2、rotate：旋转（单位deg）

语法：

transform:rotate(xdeg)；围绕盒子的内部中心点旋转到什么角度，

也可以通过，

transform-origin:x y；围绕盒子的（x, y）点旋转，值可以是left,right ，top,bottom,像素；

应用场景：旋转的三角，鼠标放上三角还旋转。

.box4{
     position: relative;
     width: 240px;
     height: 32px;
     border: 2px solid slategray;
   }
   .box4::after{
     content: "";
     position: absolute;
     top: 7px;
     right: 10px;
     width: 10px;
     height: 10px;
     border-bottom: slategray solid 2px;
     border-right: slategray solid 2px;
     transform: rotate(45deg);
     transition: all 0.2s;
   }
   .box4:hover::after{
    transform: rotate(-135deg);
    top:13px;
   }

效果图：

应用场景二：

设置旋转点：

  .box5 {
      margin: 10px 10px;
      width: 100px;
      height: 100px;
      background-color: seagreen;
      overflow: hidden;
    }
    .box5::before{
      display: block;
      content: "233";
      width: 100%;
      height: 100%;
      background-color: pink;
      transform: rotate(90deg);
      transform-origin: left bottom;
      transition: all 2s;
    }
    .box5:hover::before{
      transform: rotate(0deg);
    }

效果图：首先是绿盒子，鼠标放上去，粉色盒子绕着左下角（transform-origin: left bottom;）进入。

3、scale 缩放转换

语法：

transform:scale(x,y);

应用场景：

.box7{
      margin-top: 10px;
    }
    .box7 li{
      list-style: none;
      float: left;
      margin-right: 10px;
      padding: 5px  5px;
      width: 20px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      border: slategrey solid 2px;
      border-radius: 20px;
      transition: all 0.2s;
    }
    .box7 li:hover{
      transform: scale(1.2);
    }

效果图：鼠标放在图标上，放大1.2倍。

4、综合translate、rotate、scale的案例

当我们进行综合写法时，，同时有位移喝其他属性，记得位移放到最前面。

语法：

transform:translate() rotate();

最后附上所有例子的完整代码：（图片就自己随便找一个吧）

<!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>Transform</title>
  <style>
    *{
      margin: 0 0;
      padding: 0 0;
    }
    img{
      border: 0;
      vertical-align: middle;
      /* image-rendering: -webkit-optimize-contrast; */
    }
    /* translate 不会影响其他盒子的布局 */
    .box1 {
      width: 100px;
      height: 100px;
      background-color: teal;
      transition: all 0.5s;
    }

    .box1:hover {
      transform: translate(10%, 50px);
    }

    .box2 {
      width: 100px;
      height: 100px;
      background-color: rosybrown;
      /* transform: translate(100px,100px); */
    }

    /* translate 盒子水平垂直居中 */
    .box3 {
      position: relative;
      margin: 10px auto;
      width: 200px;
      height: 200px;
      border: seagreen solid 1px;
    }

    .box3 .son {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100px;
      height: 100px;
      background-color: #dad376;
      transform: translate(-50%, -50%);
    }

    /* rotate 旋转的三角 */
    .box4 {
      position: relative;
      width: 240px;
      height: 32px;
      border: 2px solid slategray;
    }

    .box4::after {
      content: "";
      position: absolute;
      top: 7px;
      right: 10px;
      width: 10px;
      height: 10px;
      border-bottom: slategray solid 2px;
      border-right: slategray solid 2px;
      transform: rotate(45deg);
      transition: all 0.2s;
    }

    .box4:hover::after {
      transform: rotate(-135deg);
      top: 13px;
    }

    /* rotate 围绕某一个点旋转 */
    .box5 {
      margin: 10px 10px;
      width: 100px;
      height: 100px;
      background-color: seagreen;
      overflow: hidden;
    }

    .box5::before {
      display: block;
      content: "233";
      width: 100%;
      height: 100%;
      background-color: pink;
      transform: rotate(90deg);
      transform-origin: left bottom;
      transition: all 2s;
    }

    .box5:hover::before {
      transform: rotate(0deg);
    }

    /* scale */
    .box6 {
      margin: 10px 10px;
      height: 100px;
    }
    .box6 div{
      float: left;
      margin-right: 10px;
      overflow: hidden;
    }
    .box6 img{
      width: 200px;
      height: 100px;
      transition: all .3s;
    }
    .box6 div:hover img{
      transform: scale(1.1);
    }
    .box7{
      margin-top: 10px;
    }
    .box7 li{
      list-style: none;
      float: left;
      margin-right: 10px;
      padding: 5px  5px;
      width: 20px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      border: slategrey solid 2px;
      border-radius: 20px;
      transition: all 0.2s;
    }
    .box7 li:hover{
      transform: scale(1.2);
    }

  </style>
</head>

<body>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3">
    <div class="son"></div>
  </div>
  <div class="box4"></div>
  <div class="box5"></div>
  <div class="box6">
    <div><a href="#"><img src="./images/image01.jpg" alt="中华小当家"></a></div>
    <div><a href="#"><img src="./images/image01.jpg" alt="中华小当家"></a></div>
    <div><a href="#"><img src="./images/image01.jpg" alt="中华小当家"></a></div>
  </div>
  <div class="box7">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
    </ul>
  </div>

</body>

</html>

Lhy@@

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3 transform转换

2D转换：是改变二维坐标上的位置。1、translate：移动效果，且不会影响其他盒子。对行内元素没有效果像同样有移动效果的方法：1、margin位移；2，position定位。都会影响其他盒子语法：transform:translate(x,y); //水平移动 x，垂直移动 y，1、x=50px；2、x=50%,自身宽度的50%，应用场景：让一个盒子水平垂直居中 .box3{ position: rel...
复制链接

扫一扫

专栏目录