转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的唯一,旋转,缩放等效果。
2D,不是刘备称结义兄弟关羽二弟这个称呼。2D是依托于二维坐标系的。
而2D转换时改变标签再二维平面上位置和形状的一种技术。
2D转换之移动(translate)
2D移动是2D转换里面的一种功能,可以改变元素再页面中的位置,类似定位。
格式:
transform:translate(x,y);
/*或者分开写*/
transform:translateX(n);
transform:translateY(n);
演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文档</title>
<style>
div{
width: 200px;
height: 200px;
}
.d1{
background-color: #f86262;
transform: translate(50%,50%);
}
.d2{
background-color: #4a90e2;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
</body>
</html>
可以看出:
位置移动像是相对定位,不但位置移动,同时原来自己位置还是没有让开。
translate中的百分比单位是相对于自身元素的百分比
其对行内元素没有效果。
例子演示通过移动让元素位置居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文档</title>
<style>
.d1{
position: relative;
width: 800px;
height: 800px;
background-color: #f86262;
transform: translate(50%,50%);
}
.d2{
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
background-color: #4a90e2;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="d1">
<div class="d2"></div>
</div>
</body>
</html>
2D转换之旋转(rotate)
2D选择指的是让元素再2维度的屏幕内顺时针选择或者逆时针旋转的操作。
格式:
tranform:rotate(度数);
解释:
- rotate里面单位是度数(deg),比如:90deg;
- 角度为正的时候,顺时针,负数几种为逆时针。
- 默认的时候旋转是旋转点是元素的中心。当然也可以是rotateX,以及rotateY等设置旋转中心。
演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文档</title>
<style>
img{
position: relative;
top: 100px;
left: 40%;
width: 400px;
height: 400px;
border-radius: 200px;
border: 2px solid #d10000;
transition:1s ease;
}
img:hover{
transform: rotate(45deg);
}
</style>
</head>
<body>
<img src="jpg/pkq.png">
</body>
</html>
演示2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文档</title>
<style>
div{
position: relative;
width: 200px;
height: 10px;
border :1px solid black;
}
div:after{
position: absolute;
top: 1px;
right: 4px;
width: 5px;
height: 5px;
content: "";
border-right:1px solid black;
border-bottom: 1px solid black;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div >
</div>
</body>
</html>
2D转换中心 transform-origin
这个属性是设置元素转换的中心点。
格式:
transform-origin:x y;
注意:
-
x y 默认转换是中心(50% 50%)
-
注意后面的参数x和y用空格隔开。其还可以设置象素,或者方向名字(top,bottom等)
演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文档</title>
<style>
img{
width: 200px;
height: 200px;
border :1px solid red;
border-radius: 100px;
transform-origin: bottom center;
transition: 1s ease;
}
img:hover{
transform: rotate(90deg);
}
</style>
</head>
<body>
<img src="jpg/pkq.png">
</body>
</html>
例子来一个切换图片的演示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文档</title>
<style>
div{
width: 100px;
height: 100px;
overflow: hidden;
}
.father{
position: relative;
margin: 10px auto;
border: 1px solid #000000;
}
.son1{
position: absolute;
background-color: #f86262;
transform-origin: bottom left;
transition: 1s ease;
}
.son2{
background-color: #4a90e2;
}
.son1:hover{
transform: rotate(90deg);
}
</style>
</head>
<body>
<div class="father">
<div class="son1">son1</div>
<div class="son2">son2</div>
</div>
</body>
</html>
2D转换之缩放(scale)
这个简单的理解就是元素的放大和缩小,所以需要添加scale这个属性。
格式:
transform:scale(x,y);
注意:
这个xy是通过逗号分隔的,一般为数字代表是原来元素的倍数,如果写一个参数那就是xy值一样。scale(2,2)=scale(2)
scale最大的优势是,可以设置转换中心的缩放,默认为中心缩放,不过最重要的是缩放不影响其它的盒子。
演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文档</title>
<style>
div{
margin: 10px auto;
width: 100px;
height: 100px;
background-color: red;
transition: 1s ease;
}
div:hover{
transform: scale(2,3);
}
</style>
</head>
<body>
<div >
</div>
<hr/>
</body>
</html>
很多网站鼠标移动到图片上,图片变大就可以使用这个属性。所以再用一个例子演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文档</title>
<style>
a{
text-decoration: none;
color: #d10000;
}
li{
float: left;
list-style: none;
width: 20px;
height: 20px;
line-height: 10px;
line-height: 20px;
text-align: center;
border: 1px solid #000000;
border-radius: 20px;
margin: 5px;
transition: 1s ease;
/*为了证明可以修缩放的点*/
transform-origin: top center;
}
li:hover{
transform: scale(2);
}
</style>
</head>
<body>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
</ul>
</body>
</html>
2D转换复合写法
自然所有的转换的属性值可以同时写在一个transform属性后面,这个需要注意下:
-
同时使用多个转换一般格式
transform:translate() rotate() scale()等
-
注意顺序会影响转换的效果,先旋转会修改坐标轴的方向,所以有位移的时候一定要把位移放在最前面。
演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文档</title>
<style>
div{
width: 100px;
height: 100px;
}
.d1{
background-color: #4a90e2;
transition: 1s ease;
}
.d2{
background-color: #f86262;
transition: 1s ease;
}
.d1:hover{
transform: translate(200px,200px) rotate(360deg) scale(1.1);
}
.d2:hover{
transform: rotate(360deg) scale(1.1) translate(200px,200px) ;
}
</style>
</head>
<body>
<div class="d1">d1</div>
<hr />
<div class="d2">d2</div>
</body>
</html>