当前位置：主页 > 查看内容

【44】CSS3（4）——新增属性② 2D转换

发布时间：2021-05-25 00:00| 有位朋友查看

简介：★文章内容学习来源拉勾教育大前端就业集训营 2D 转换一、介绍属性名 transform 作用对元素进行移动、缩放、旋转、拉长或拉伸。配合过渡和即将学习的动画知识可以取代大量之前只能靠Flash才可以实现的效果。属性值多种转换方法的属性值可以实现不同的……

★文章内容学习来源：拉勾教育大前端就业集训营

2D 转换

在这里插入图片描述

一、介绍

属性名：transform
作用：对元素进行移动、缩放、旋转、拉长或拉伸。
配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。
属性值：多种转换方法的属性值，可以实现不同的转换效果。详细见以下。 |

二、属性值及举例

1.位移 `translate()`

transform 的属性值为 translate() 时，可以实现位移效果。
书写语法：

值	说明
`translate(x,y)`	x,y分别为水平和垂直方向位移的距离，可以为px值或百分比，区分正负
`translate(x)`	只有一个数值，表示水平方向的位移

百分比指的是元素自身的百分比（border及以内，不包括margin）

1.1举例 `translate(x)` （只有一个数值，表示水平方向的位移）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2D 转换-位移(x)</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.box{   /*定义一个box表示原img所在的位置*/
			width: 361.7px;
			height: 340px;
			border: 1px solid red;
            margin: 100px 200px;
		 }
       .box img {
           height: 340px;
           transform: translate(100px);/*向右移动100px*/
       }
	</style>
</head>
<body>
	<div class="box">
		<img src="samoye.jpg" alt="">
  </div>
</body>
</html>

在这里插入图片描述

1.2举例 `translate(x,y)` （x,y分别为水平和垂直方向位移的距离）

       .box img {
           height: 340px;
           transform: translate(-100px,-50px);  /*左移100px，上移50px*/
       }

在这里插入图片描述

2. 缩放`scale()`

transform 的属性值为 scale() 时，可以实现元素缩放效果。
书写语法：

值	说明
`scale(x, y)`	x,y分别为改变元素的宽度和高度的倍数
`scale(n)`	只有一个值，表示宽度和高度同时缩放n倍
`scaleX(n)`	改变元素的宽度倍数
`scaleY(n)`	改变元素的高度倍数

2.1举例`scale(x, y)`

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2D转换-缩放(x, y)</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.box{   /*外面的box代表img原来的大小*/
			width: 361.7px;
			height: 340px;
			border: 1px solid red;
			margin: 100px 100px;
		}
    .box img {
		height: 340px;
		transform: scale(0.5,0.7); /*水平方向缩放0.5倍，垂直方向缩放0.7倍*/
    }
	</style>
</head>
<body>
	<div class="box">
		<img src="samoye.jpg" alt="">
  </div>
  
</body>
</html>

在这里插入图片描述

2.2举例`scale(n)`

   .box img {
		height: 340px;
		transform: scale(0.5); /*宽度高度同时缩放0.5倍*/
    }

在这里插入图片描述

2.3举例`scaleX(n)`

 .box img {
		height: 340px;
		transform: scaleX(0.5);  /*宽度缩放0.5倍*/
    }

在这里插入图片描述

2.4举例`scaleY(n)`

  .box img {
		height: 340px;
		transform: scaleY(0.5);  /*高度缩放0.5倍*/
    }

在这里插入图片描述

3.旋转 rotate()

transform 属性值设置为 rotate() 时，实现元素的旋转。
书写语法： rotate(数字deg);
其中，deg为度数单位，正数表示顺时针旋转，负数表示逆时针旋转。
2D的旋转只有一个属性值。
注意：元素旋转后，坐标轴也跟着发生转变。
因此，多个属性值同时设置给 transform 时，书写顺序不同导致的转换效果有差异。（具体参见3.3和3.4举例）

3.1举例：旋转（正数）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2D转换-旋转rotate(正数)</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.box{   /*外面的box代表img原来的位置*/
			width: 361.7px;
			height: 340px;
			border: 1px solid red;
			margin: 100px 100px;
		}
        .box img {
	      	height: 340px;
            transform: rotate(30deg); /*顺时针*/
        }
	</style>
</head>
<body>
	<div class="box">
		<img src="samoye.jpg" alt="">
  </div>
  
</body>
</html>

在这里插入图片描述

3.2举例：旋转（负数）

.box img {
	height: 340px;
    transform: rotate(-30deg); /*逆时针*/
}

在这里插入图片描述

因为元素旋转后，坐标轴也跟着发生转变。
因此，多个属性值同时设置给 transform 时，书写顺序不同导致的转换效果有差异，为了更好地感受差异，借用:hover伪类和transition过渡属性，动态理解，如下两个例子。

3.3举例：先旋转后位移

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2D转换-旋转（先旋转后位移）</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.box{   /*外面的box代表img原来的位置*/
			width: 361.7px;
			height: 340px;
			border: 1px solid red;
			margin: 50px;
		}
        .box img {
	      	height: 340px;
        } 
		.box img:hover {  /*鼠标一悬停，进行*/
			transform: rotate(30deg) translate(300px);  /* 先旋转后位移 */
			transition: img 5s linear 0 ;  /*过渡属性设置，上篇有介绍*/
		}
	</style>
</head>
<body>
	<div class="box">
		<img src="samoye.jpg" alt="">
  </div>
</body>
</html>

在这里插入图片描述

3.4举例：先位移后旋转

.box img:hover {
	transform: translate(300px)  rotate(30deg) ;  /* 先位移后旋转 */
	transition: img 5s linear 0 ;
}

在这里插入图片描述

4.倾斜 skew()

transform 属性值设置为 skew() 时，实现元素的倾斜。
书写语法：transform: skew(数字deg,数字deg);
两个属性值分别表示水平和垂直方向倾斜的角度，属性值可以为正可以为负，第二个数值不写默认为0。
水平方向，底边变化，正数向右；
垂直方向，右边变化，正数向下；
*

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2D转换-倾斜 skew() </title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.box{   /*外面的box代表img原来的位置*/
			width: 361.7px;
			height: 340px;
			border: 1px solid red;
			margin: 100px;
		}
        .box img {
	      	height: 340px;
			transform: skew(30deg,); /*水平方向，正数*/
        } 
	</style>
</head>
<body>
	<div class="box">
		<img src="samoye.jpg" alt="">
  </div>
</body>
</html>

在这里插入图片描述

4.2举例：水平方向负数

.box img {
	 height: 340px;
	transform: skew(-30deg);/*水平方向，负数*/
}

在这里插入图片描述

4.3举例：垂直方向正数

.box img {
	 height: 340px;
	 transform: skew(0,30deg); /*垂直方向，正数*/
}

在这里插入图片描述

4.4举例：垂直方向负数

.box img {
	 height: 340px;
	 transform: skew(0,-30deg); /*垂直方向，正数*/
}

在这里插入图片描述

三、 `transform-origin` 属性

1.介绍

作用：设置调整元素的水平和垂直方向原点的位置，调整元素的基准点。
属性值：包含两个，中间使用空格分隔。
语法： transform-origin：x y ;

属性值	说明
x	定义 X 轴的原点在何处。可能的值：left 、center、right、像素值、百分比
y	定义 Y 轴的原点在何处。可能的值：top、center、bottom、像素值、百分比

2.举例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>transform-origin属性 </title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.box{   /*外面的box代表img原来的位置*/
			width: 361.7px;
			height: 340px;
			border: 1px solid red;
			margin: 200px;
		}
        .box img {
	      	height: 340px;
			transform-origin: left top;  /*定义基准点*/
        } 
		.box img:hover {
			transform: rotate(-30deg);  /*逆时针旋转30deg*/
		}
	</style>
</head>
<body>
	<div class="box">
		<img src="samoye.jpg" alt="">
  </div>
</body>
</html>

在这里插入图片描述

四、综合应用——卡包特效案例

在这里插入图片描述

<html>
    <head>
        <title>卡包特效</title>
         <style>
           .box {
                  position : relative;
                  width: 300px;
                  height: 170px;
                  border: 1px solid black;
                  margin: 400px 50px;
                 }
            .box img {
                  position :absolute;  
                  left: 0;
                  top: 0;/*所有的卡片初始都在这个位置，所以要设置定位，子绝父相*/
                  width: 300px;
                  height: 170px;
                  transform-origin: right top;
                  transition: all 1s  linear 0s;
                }  
             .box:hover img:nth-child(1) {
                  transform: rotate(60deg);
                 }
             .box:hover  img:nth-child(2) {
                  transform: rotate(120deg);
                 }
              .box:hover img:nth-child(3) {
                 transform: rotate(180deg);
                     }
               .box:hover img:nth-child(4) {
                transform:  rotate(240deg);
                   }
             .box:hover img:nth-child(5) {
                transform: rotate(300deg);
              }
             .box:hover img:nth-child(6) {
             transform: rotate(360deg);
             }
         </style>
    </head>
   <body>
         <div class="box">
             <img src="img/1.jpg"></img>
             <img src="img/2.jpg"></img>
             <img src="img/3.jpg"></img>
             <img src="img/4.jpg"></img>
             <img src="img/5.jpg"></img>
             <img src="img/6.jpg"></img>
          </div>
   </body>
</html>

下篇继续：
【45】CSS3 （4）——新增属性③3D 转换

；原文链接：https://blog.csdn.net/weixin_47640160/article/details/115495544
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！

上一篇：2021前端面试CSS必须要懂的几个地方！ 下一篇：没有了

随机推荐

VS2019创建MFC程序的实现方法

前言：本博客只是因为我正在上计算机图形学这门课，为了方便复习所写，所以内容...
DISCUZ论坛的UBB编辑器（增加灵活调用，

演示地址： http://52515.net/lib/upfile/ubb/ 下载地址： http://52515.net/lib...
AjaxFileUpload结合Struts2实现多文件上

上篇文章 https://www.jb51.net/article/124489.htm 介绍了ajaxfileupload实现多...
从SQL到MongoDB，这一篇就够了

前言很多开发者首次接触数据库(通常是在高校课堂)的概念，或者说接触第一个数据...
Javascript 模拟mvc实现点餐程序案例详解

MVC模式是一个比较成熟的开发模式。M是指业务模型，V是指用户界面，C则是控制器...
深入浅析Jsonp解决ajax跨域问题

一、介绍最近跨域问题比较多，而且自己刚好也看到这一块，就总结了一下，关于JS...
HTML里面Textarea换行问题总结

最近碰到一个数据转来转去转到Textrea里面是否能真正按行存放的问题，在这里总结...
第二章初识C语言常量

若识庐山真面目 C语言中的常量分为以下几种字面常量 const修饰的常变量 #define...
不可忽视的MySQL字符集

MySQL的字符集从latin1经过utf8 到utf8mb4 ，算是经历曲折的路线。特别是从使用...
js调用Flex中的方法并向flex中传参及flex

首先，有了一个swf文件，test.swf，同时也有一个自动生成的html文件，test.html...

【44】CSS3（4）——新增属性② 2D转换

2D 转换

一、介绍

二、属性值及举例

1.位移 translate()

1.1举例 translate(x) （只有一个数值，表示水平方向的位移）

1.2举例 translate(x,y) （x,y分别为水平和垂直方向位移的距离）

2. 缩放scale()

2.1举例scale(x, y)

2.2举例scale(n)

2.3举例scaleX(n)

2.4举例scaleY(n)

3.旋转 rotate()

3.1举例：旋转（正数）

3.2举例：旋转（负数）

3.3举例：先旋转后位移

3.4举例：先位移后旋转

4.倾斜 skew()

4.2举例：水平方向负数

4.3举例：垂直方向正数

4.4举例：垂直方向负数

三、 transform-origin 属性

1.介绍

2.举例

四、综合应用——卡包特效案例

推荐图文

随机推荐

关于我们

1.位移 `translate()`

1.1举例 `translate(x)` （只有一个数值，表示水平方向的位移）

1.2举例 `translate(x,y)` （x,y分别为水平和垂直方向位移的距离）

2. 缩放`scale()`

2.1举例`scale(x, y)`

2.2举例`scale(n)`

2.3举例`scaleX(n)`

2.4举例`scaleY(n)`

三、 `transform-origin` 属性