CSS3-转换(transform)

2023-10-11 09:13:16

@

目录

1. 简介

转换(transform)：是CSS3的特征之一，可以实现元素的位移、旋转，缩放等效果。可理解为“变形”。

  • 移动： translate
  • 旋转： rotate
  • 缩放： scale



2. 2D转换

1.) 二维平面坐标系

  • 2D 转换是改变标签在二维平面上的位置和形状的一种技术。

  • 二维坐标系

    CSS3-转换(transform)


2.) 2D 移动translate

  • 解释

    CSS3-转换(transform)

    2D移动translate 是2D转换的一种功能，可以改变元素在页面中的位置，类似定位。（在页面中移动盒子位置，可通过盒子模型、定位、2D移动来实现）

  • 语法

    • x 就是 x 轴上水平移动

    • y 就是 y 轴上水平移动

      transform: translate(x, y)
transform: translateX(n)
transfrom: translateY(n)

  • 注意❕

    • 2D 的移动主要是指 水平、垂直方向上的移动。
    • translate 最大的优点就是不影响其他元素的位置。
    • translate 中的参数为百分数时（%单位），移动的距离是相对于本身的宽度和高度来进行计算的。
    • 行内标签没有效果，而行内块和块级标签都有此效果。

  • 代码演示

    div {
  background-color: lightseagreen;
  width: 200px;
  height: 100px;
  /* 平移 */
  /* 水平垂直移动 100px */
  /* transform: translate(100px, 100px); */

  /* 水平移动 100px */
  /* transform: translate(100px, 0) */

  /* 垂直移动 100px */
  /* transform: translate(0, 100px) */

  /* 水平移动 100px */
  /* transform: translateX(100px); */

  /* 垂直移动 100px */
  transform: translateY(100px)
}

  • 让一个盒子水平垂直居中

     <style>
        div {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        
        p {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            background-color: purple;
            /* margin-top: -100px;
            margin-left: -100px; */
            /* translate(-50%, -50%)  盒子往上走自己高度的一半，这种写法的优点在于如果改变该盒子的大小，该盒子还是水平垂直居中，应为它的数值没有写死 */
            transform: translate(-50%, -50%);
        }
    </style>
<body>
    <div>
        <p></p>
    </div>
</body>


3.) 2D 旋转rotate

  • 解释

    CSS3-转换(transform)

    rotate 旋转： 2D 旋转指的是让元素在二维平面内顺时针或者逆时针旋转

  • rotate 语法

    /* 单位是：deg */
transform: rotate(度数)

  • 注意❕

    • rotate 里面跟度数，单位是 deg
    • 角度为正时，顺时针，角度为负时，逆时针
    • 默认旋转的中心点是元素的中心点

  • 代码演示

    img:hover {
  transform: rotate(360deg)
}

  • 三角

    实现代码

     <style>
        div {
            position: relative;
            width: 249px;
            height: 35px;
            border: 1px solid #000;
        }
        
        div::after {
            content: "";
            position: absolute;
            top: 8px;
            right: 15px;
            width: 10px;
            height: 10px;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            transform: rotate(45deg);
            transition: all 0.2s;
        }
        /* 鼠标经过div  里面的三角旋转 */
        
        div:hover::after {
            transform: rotate(225deg);
        }
    </style>
<body>
    <div></div>
</body>

  • 设置元素旋转中心点(transform-origin)

    1. transform-origin 基础语法

      transform-origin: x y;

    2. 注意❕

      • 注意后面的参数 x 和 y 用空格隔开
      • x y 默认旋转的中心点是元素的中心 (50% 50%)，等价于 center center
      • 还可以给 x y 设置像素或者方位名词(top、bottom、left、right、center)

    3. 旋转中心案例

      实现代码

       <style>
        div {
            overflow: hidden;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            border: 1px solid #000;
        }
        
        div::before {
            content: '特效';
            display: block;
            width: 100%;
            height: 100%;
            background-color: skyblue;
            transform: rotate(90deg);
            transform-origin: left bottom;
            transition: all 0.5s;
        }
        
        div:hover::before {
            transform: rotate(0deg);
        }
    </style>
</head>

<body>
    <div>
    </div>
</body>

4.) 2D 缩放 scale

  • 解释

    CSS3-转换(transform)

    scale 的作用 ：用来控制元素的放大与缩小

  • 语法

    transform: scale(x, y)

  • 知识要点

    • 注意，参数x 与 y 之间使用逗号进行分隔，且参数值不带单位，为纯数值，包括小数，表示缩放当前大小的倍数。

      /*宽高都放大一倍，相当于没有放大*/
transform: scale(1, 1);
/*宽和高都放大了二倍*/
transform: scale(2, 2)
/*如果只写了一个参数，第二个参数就和第一个参数一致*/
transform: scale(2)
/*缩小*/
transform:scale(0.5, 0.5)

    • scale 最大的优势：可以通过设置transform-origin转换中心点缩放，默认以中心点缩放，而且不影响其他盒子

  • 代码演示

       div:hover {
	   /* 注意，数字是倍数的含义，所以不需要加单位 */
	   /* transform: scale(2, 2) */
   
	   /* 实现等比缩放，同时修改宽与高 */
	   /* transform: scale(2) */
   
	   /* 小于 1 就等于缩放*/
	   transform: scale(0.5, 0.5)
   }

  • 图片放大案例

    CSS3-转换(transform)

    代码演示

    <style>
          div {
              overflow: hidden;
              float: left;
              margin: 10px;
          }
          
          div img {
              transition: all .4s;
          }
          
          div img:hover {
              transform: scale(1.1);
          }
      </style>
  
  <body>
      <div>
          <a href="#"><img src="media/scale.jpg" alt=""></a>
      </div>
      <div>
          <a href="#"><img src="media/scale.jpg" alt=""></a>
      </div>
      <div>
          <a href="#"><img src="media/scale.jpg" alt=""></a>
      </div>
  </body>

  • 分页按钮案例

    代码演示

        <style>
        li {
            float: left;
            width: 30px;
            height: 30px;
            border: 1px solid pink;
            margin: 10px;
            text-align: center;
            line-height: 30px;
            list-style: none;
            border-radius: 50%;
            cursor: pointer;
            transition: all .4s;
        }
        
        li:hover {
            transform: scale(1.2);
        }
    </style>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
</body>

5.) 2D 转换综合写法以及顺序问题

  1. 知识要点

    • 同时使用多个转换，其格式为 transform: translate() rotate() scale()
    • 虽然样式顺序没有固定要求，但顺序会影响到转换的效果(先旋转会改变坐标轴方向)
    • 但我们同时有位置或者其他属性的时候，要将位移放到最前面

  2. 代码演示

    div:hover {
  transform: translate(200px, 0) rotate(360deg) scale(1.2)
}

3. 3D转换

3D转换对于块级元素时肯定有效果，对于行内元素肯定无效果，行内块元素不确定

1.) 三维坐标系

三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。

  • x轴：水平向右， 注意： x 右边是正值，左边是负值
  • y轴：垂直向下， 注意： y 下面是正值，上面是负值
  • z轴：垂直屏幕， 注意： 往外面是正值，往里面是负值

CSS3-转换(transform)



2.) 3D移动 translate3d

3D 移动就是在 2D 移动的基础上多加了一个可以移动的方向，就是 z 轴方向

  • transform: translateX(100px)：仅仅是在 x 轴上移动

  • transform: translateY(100px)：仅仅是在 y 轴上移动

  • transform: translateZ(100px)：仅仅是在 z 轴上移动

  • transform: translate3d(x, y, z)：其中x、y、z 分别指要移动的轴的方向的距离

  • 注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充

代码演示

transform: translate3d(100px, 100px, 100px)
/* 注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充 */
transform: translate3d(100px, 100px, 0)


3.) 透视 perspective

  • 如果想要网页产生 3D 效果需要透视(理解成 3D 物体投影的 2D 平面上)

  • 透视也称为视距，所谓的视距就是人的眼睛到屏幕的距离，距离视觉点越近的在电脑平面成像越大，越远成像越小

    CSS3-转换(transform)

    • d：就是视距，视距越大，物体成像越小。
    • z：就是 z 轴，z 轴越大(正值)，物体就越大。

  • 注意：

    1. 透视的单位是像素
    2. 透视需要写在被视察元素的父盒子上面

    代码演示

    <style>
	body {
 	 	perspective: 1000px;
	}
</style>

<body>
    <div>
        <!-- ... -->
    </div>
</body>

  • translateZ 与 perspecitve 的区别

    • perspecitve 给父级进行设置，translateZ 给 子元素进行设置不同的大小。这样可以方便的实现父盒子里的多个子盒子的大小不一。


4.) 3D旋转 rotate3d

  • 定义

    3D旋转指可以让元素在三维平面内沿着 x轴， y轴， z轴或者自定义轴进行旋转。

  • 语法

    • transform: rotateX(45deg) -- 沿着 x 轴正方向旋转 45 度
    • transform: rotateY(45deg) -- 沿着 y 轴正方向旋转 45 度
    • transform: rotateZ(45deg) -- 沿着 z 轴正方向旋转 45 度
    • transform: rotate3d(x, y, z, 45deg) -- 沿着自定义轴旋转 45 deg 为角度

  • ratateX

    1. 代码演示

      <style>
	div {
     	perspective: 300px;
  	}
   
   img {
     display: block;
     margin: 100px auto;
     transition: all 1s;
   }
   
   img:hover {
     transform: rotateX(-45deg)
   }
</style>
<body>
    <div>
        <img>
    </div>
</body>

    2. 左手准则

      • 左手的手拇指指向 x 轴的正方向
      • 其余手指的弯曲方向就是该元素沿着 x 轴旋转的方向,及度数参数为正时的顺时针方向
        CSS3-转换(transform)

  • rotateY

    1. 代码演示

      div {
perspective: 500px;
}

img {
display: block;
margin: 100px auto;
transition: all 1s;
}

img:hover {
transform: rotateY(180deg)
}

    2. 左手准则

      • 左手的拇指指向 y 轴的正方向
      • 其余的手指弯曲方向就是该元素沿着 y 轴旋转的方向(正值)
        CSS3-转换(transform)

  • rotateZ

    1. 代码演示

      div {
 /*
   3d旋转中的沿Y轴旋转可以不用写视距样式，它的效果和2d旋转时一样的。 
    */      
  perspective: 500px;
}

img {
  display: block;
  margin: 100px auto;
  transition: all 1s;
}

img:hover {
  transform: rotateZ(180deg)
}

  • rotate3d

    • transform: rotate3d(x, y, z, deg) -- 沿着自定义轴旋转 deg 为角度

      • x, y, z 表示旋转轴的矢量，是标识你是否希望沿着该轴进行旋转，最后一个标识旋转的角度
        • transform: rotate3d(1, 1, 0, 180deg) -- 沿着对角线旋转 45deg
        • transform: rotate3d(1, 0, 0, 180deg) -- 沿着 x 轴旋转 45deg
        • x,y,z的值也不一定是1或0，也可自定义。

    • 代码演示

      div {
  perspective: 500px;
}

img {
  display: block;
  margin: 100px auto;
  transition: all 1s;
}

img:hover {
  transform: rotate3d(1, 1, 0, 180deg)
}

  • 3D呈现 transform-style

    • 作用：控制子元素是否开启三维立体环境。
    • transform-style: flat 代表子元素不开启 3D 立体空间，是默认的属性值
    • transform-style: preserve-3d 子元素开启立体空间
    • 该样式写给父级，但是影响的是子盒子
      CSS3-转换(transform)
上一篇：AndroidStudio开发Flutter使用技巧


下一篇：Batch入门教程丨第一章：部署与Hello World!（上）