CSS3新特新之-transform

最新推荐文章于 2024-05-10 03:55:35 发布

weixin_37584288

最新推荐文章于 2024-05-10 03:55:35 发布

阅读量187

点赞数 1

文章标签： css3 css

本文链接：https://blog.csdn.net/weixin_37584288/article/details/106288502

版权

CSS3新特新之-transform

transfrom的含义：改变，使…变形；转换。
transform的属性包括：rotate() / skew() / scale() / translate() ，分别还有x、y之分，比如：rotatex() 和 rotatey() ，以此类推。

基础代码

	<!DOCTYPE html>
	<html lang="en">
	    <header>
	        <style>
	            .margin_box{
	                height: 310px;
	                width: 310px;
	                border: 1px solid blueviolet;
	                margin: auto;
	                display: flex;
	            }
	            .padding-box{
	                height: 300px;
	                width: 300px;
	                margin: auto;
	                background: lawngreen;
	                display: flex;
	                align-items: center;
	            }
	            .transform-test{ }
	        </style>
	    </header>
	    <body>
	        <div class="margin_box">
	            <div class="padding-box transform-test"></div>
	        </div>
	    </body>
	</html>

在这里插入图片描述

各个属性的分解用法
- transform:rotate()
  - 含义：旋转；其中“deg”是“度”的意思，如“30deg”表示“30度”
  - css代码：
```
.transform-test{
     transform:rotate(30deg);
    -ms-transform:rotate(30deg); /* IE 9 */
    -moz-transform:rotate(30deg); /* Firefox */
    -webkit-transform:rotate(30deg); /* Safari and Chrome */
    -o-transform:rotate(30deg); /* Opera *
   }
```
  - 实例展示：
  - 衍生属性：
    1.rotate(): 2D旋转，根据指定的旋转角度进行旋转;
    2.rotate3D(): 3D旋转，必须指定四个参数，前3个参数分别表示旋转的方向x y z, 第4个参数表示旋转的角度;
    3.rotateX(): 指定X轴的旋转角度;
    4.rotateY(): 指定Y轴的旋转角度;
    5.rotateZ(): 指定Z轴的旋转角度;
  - 使用rotate时需要注意以下几点：
    1.旋转角度必须有单位，否则将报错。
    2.rotate值为正值时，顺时针旋转；否则逆时针旋转。
    3.在2D情况下，rotate()只能指定一个参数；
    4.在3D情况下，rotate3D()必须指定四个参数，否则将报错。
    5.对象进行2D空间或3D空间旋转。常与 transform-origin 一起使用。
- transform:skew()
  - 含义：斜切
  - css代码：
```
.transform-test{
   transform:skew(30deg);
   -ms-transform:skew(30deg); /* IE 9 */
   -moz-transform:skew(30deg); /* Firefox */
   -webkit-transform:skew(30deg); /* Safari and Chrome */
   -o-transform:skew(30deg); /* Opera *
   }
```
  - 实例展示：
- 衍生属性：
  1.skew(): 第一个参数对应X轴[必须], 第二个参数对应Y轴[当不设置时, 默认为0];;
  2.skewX(): 指定X轴的斜切;
  3.skewY(): 指定Y轴的斜切;
- 使用skew时需要注意以下几点
  1.对象进行2D空间斜切。常与 transform-origin 一起使用。
- transform:scale()
  - 含义：缩放
  - css代码：
```
.transform-test{
      transform:scale(.5);
      -ms-transform:scale(.5); /* IE 9 */
      -moz-transform:scale(.5); /* Firefox */
      -webkit-transform:scale(.5); /* Safari and Chrome */
      -o-transform:scale(.5); /* Opera *
    }
```
  - 实例展示：
  - 衍生属性
    1.scale(): 第一个参数指定X轴的缩放倍数[必须], 第二个参数指定Y轴的缩放倍数[当不设置时, 默认取第一个参数的值];;
    2.scaleX(): 指定X轴的缩放倍数;
    3.scaleY(): 指定Y轴的缩放倍数;
    4.scale3D(): 第一个参数指定X轴的缩放倍数, 第二个参数指定Y轴的缩放倍数, 第三个参数指定Z轴的缩放倍数, 3个参数缺一不可;
    5.scaleZ(): 指定Z轴的缩放倍数;
  - 使用scale时需要注意以下几点：
    1.参数值为倍数，如：scale(2); 表示放大2倍。
    2.参数值是分别相对元素的宽和高进行计算的。即便是scale只设置了一个值，那也是分别计算的。
    3.参数值大于1表示放大；0～1之间为缩小；1表示不便；0的时候元素不可见。
    4.参数值为负数时，除了元素的方向发生改变[x轴反转]，其他规律与正值一致
    5.对象进行2D空间或3D空间缩放。常与 transform-origin 一起使用。
- transform:translate()
  - 含义：位移
  - css代码：
```
.transform-test{
   transform:translateX(50px);
   -ms-transform:translateX(50px); /* IE 9 */
   -moz-transform:translateX(50px); /* Firefox */
   -webkit-transform:translateX(50px); /* Safari and Chrome */
   -o-transform:translateX(50px); /* Opera *
 }
```
  - 实例展示：
- 衍生属性
  1.translate(): 第一个参数指定X轴的位移量[必须], 第二个参数指定Y轴的位移量[当不设置时, 默认为0];
  2.translateX(): 指定X轴的位移;
  3.translateY(): 指定Y轴的位移;
  4.translate3D(): 第一个参数指定X轴的位移量, 第二个参数指定Y轴的位移量, 第三个参数指定Z轴的位移量, 3个参数缺一不可;
  5.translateZ(): 指定Z轴的位移;
- 使用translate时需要注意
  1.位移量的百分比是相对元素自身宽高来计算的。
  2.translate有一个最常见的应用，即当元素宽度高度不固定时，使用translate可实现水平以及垂直方向的居中。
```
	  position: absolute;
       padding: 50px;
       background-color: #fb3;
       top: 50%; /*相对于父级*/
       left: 50%;
       transform: translate(-50%, -50%); /*相对自身*/
       -ms-transform: translate(-50%, -50%); 
       -moz-transform: translate(-50%, -50%); 
       -webkit-transform: translate(-50%, -50%);
```

weixin_37584288

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
CSS3新特新之-transform

CSS3新特新之-transformtransfrom的含义：改变，使…变形；转换。transform的属性包括：rotate() / skew() / scale() / translate() ，分别还有x、y之分，比如：rotatex() 和 rotatey() ，以此类推。基础代码 <!DOCTYPE html> <html lang="en"> <header> <style> .mar
复制链接

扫一扫