2D 转换
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/94c635c37128cc74677e4983c65da82a.png)
一、介绍
- 属性名 :
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{
width: 361.7px;
height: 340px;
border: 1px solid red;
margin: 100px 200px;
}
.box img {
height: 340px;
transform: translate(100px);
}
</style>
</head>
<body>
<div class="box">
<img src="samoye.jpg" alt="">
</div>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/dd5a8fa7e9d2e42a08065fbd9cb42f8c.png)
1.2举例 translate(x,y)
(x,y分别为水平和垂直方向位移的距离)
.box img {
height: 340px;
transform: translate(-100px,-50px);
}
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/b8fc36405140c64e2018632ddf704b3a.png)
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{
width: 361.7px;
height: 340px;
border: 1px solid red;
margin: 100px 100px;
}
.box img {
height: 340px;
transform: scale(0.5,0.7);
}
</style>
</head>
<body>
<div class="box">
<img src="samoye.jpg" alt="">
</div>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/dc0571a5de15e5fe52c7a13b0e4d518c.png)
2.2举例scale(n)
.box img {
height: 340px;
transform: scale(0.5);
}
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/e271030e1338f3f890bc2d471bb4e1e1.png)
2.3举例scaleX(n)
.box img {
height: 340px;
transform: scaleX(0.5);
}
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/1390fde76c262db7f985a0189b17356c.png)
2.4举例scaleY(n)
.box img {
height: 340px;
transform: scaleY(0.5);
}
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/e037cc52e1148674027c878fd3d14b74.png)
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{
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>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f75d851a38b6f2a407ad7efd9ba8f691.png)
3.2举例:旋转(负数)
.box img {
height: 340px;
transform: rotate(-30deg);
}
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/9c4a6191b1b3888eddd287ce6787e0df.png)
因为元素旋转后,坐标轴也跟着发生转变。
因此,多个属性值同时设置给 transform 时,书写顺序不同导致的转换效果有差异,为了更好地感受差异,借用:hover
伪类和transition
过渡属性,动态理解,如下两个例子。
3.3举例:先旋转后位移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2D转换-旋转(先旋转后位移)</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
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>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/b97efc9fc55cd6381bf510678bcace42.gif)
3.4举例:先位移后旋转
.box img:hover {
transform: translate(300px) rotate(30deg) ;
transition: img 5s linear 0 ;
}
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/95c726b2a2363aa32202016d73631ee6.gif)
4.倾斜 skew()
- transform 属性值设置为
skew()
时,实现元素的倾斜。 - 书写语法:
transform: skew(数字deg,数字deg);
- 两个属性值分别表示水平和垂直方向倾斜的角度,属性值可以为正可以为负,第二个数值不写默认为0。
- 水平方向,底边变化,正数向右;
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/3a73869f560e81239de47349b3b1bb07.png)
- 垂直方向,右边变化,正数向下;
*![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/e3cefe928e79b822d11c19311ef4f3c4.png)
![4.1举例:水平方向正数](https://i-blog.csdnimg.cn/blog_migrate/2565330da4418cc430de8a024489c375.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2D转换-倾斜 skew() </title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
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>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/a31ad288db6d0f8dd7e2c95dd12ad4f1.png)
4.2举例:水平方向负数
.box img {
height: 340px;
transform: skew(-30deg);
}
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f14346293bbe32f7ad6513cbdaa07310.png)
4.3举例:垂直方向正数
.box img {
height: 340px;
transform: skew(0,30deg);
}
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/a107a904c6df07ff358b564f680f2e95.png)
4.4举例:垂直方向负数
.box img {
height: 340px;
transform: skew(0,-30deg);
}
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/b529bf911485d689e1f81d6c38e3e76f.png)
三、 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{
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);
}
</style>
</head>
<body>
<div class="box">
<img src="samoye.jpg" alt="">
</div>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/5f9dfac0c02a5bc9b688ac0759ddeda5.gif)
四、综合应用——卡包特效案例
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/22052f444e93cf9868b6343caa39844c.gif)
<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 转换