2D转换:是改变二维坐标上的位置。
1、translate:移动效果,且不会影响其他盒子。
对行内元素没有效果
像同样有移动效果的方法:1、margin位移;2,position定位。都会影响其他盒子
语法:
transform:translate(x,y); //水平移动 x,垂直移动 y,
1、x=50px;
2、x=50%,自身宽度的50%,
应用场景:让一个盒子水平垂直居中
.box3{
position: relative;
margin: 10px auto;
width: 400px;
height: 400px;
border: seagreen solid 1px;
}
.box3 .son{
position: absolute;
top:50%;
left:50%;
width: 100px;
height: 100px;
background-color: #dad376;
transform: translate(-50%,-50%);
}
<div class="box3">
<div class="son"></div>
</div>
2、rotate:旋转(单位deg)
语法:
transform:rotate(xdeg);围绕盒子的内部中心点旋转到什么角度,
也可以通过,
transform-origin:x y;围绕盒子的(x, y)点旋转,值可以是left,right ,top,bottom,像素;
应用场景:旋转的三角,鼠标放上三角还旋转。
.box4{
position: relative;
width: 240px;
height: 32px;
border: 2px solid slategray;
}
.box4::after{
content: "";
position: absolute;
top: 7px;
right: 10px;
width: 10px;
height: 10px;
border-bottom: slategray solid 2px;
border-right: slategray solid 2px;
transform: rotate(45deg);
transition: all 0.2s;
}
.box4:hover::after{
transform: rotate(-135deg);
top:13px;
}
效果图:
应用场景二:
设置旋转点:
.box5 {
margin: 10px 10px;
width: 100px;
height: 100px;
background-color: seagreen;
overflow: hidden;
}
.box5::before{
display: block;
content: "233";
width: 100%;
height: 100%;
background-color: pink;
transform: rotate(90deg);
transform-origin: left bottom;
transition: all 2s;
}
.box5:hover::before{
transform: rotate(0deg);
}
效果图:首先是绿盒子,鼠标放上去,粉色盒子绕着左下角(transform-origin: left bottom;)进入。
3、scale 缩放转换
语法:
transform:scale(x,y);
应用场景:
.box7{
margin-top: 10px;
}
.box7 li{
list-style: none;
float: left;
margin-right: 10px;
padding: 5px 5px;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
border: slategrey solid 2px;
border-radius: 20px;
transition: all 0.2s;
}
.box7 li:hover{
transform: scale(1.2);
}
效果图:鼠标放在图标上,放大1.2倍。
4、综合translate、rotate、scale的案例
当我们进行综合写法时,,同时有位移喝其他属性,记得位移放到最前面。
语法:
transform:translate() rotate();
最后附上所有例子的完整代码:(图片就自己随便找一个吧 )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transform</title>
<style>
*{
margin: 0 0;
padding: 0 0;
}
img{
border: 0;
vertical-align: middle;
/* image-rendering: -webkit-optimize-contrast; */
}
/* translate 不会影响其他盒子的布局 */
.box1 {
width: 100px;
height: 100px;
background-color: teal;
transition: all 0.5s;
}
.box1:hover {
transform: translate(10%, 50px);
}
.box2 {
width: 100px;
height: 100px;
background-color: rosybrown;
/* transform: translate(100px,100px); */
}
/* translate 盒子水平垂直居中 */
.box3 {
position: relative;
margin: 10px auto;
width: 200px;
height: 200px;
border: seagreen solid 1px;
}
.box3 .son {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
background-color: #dad376;
transform: translate(-50%, -50%);
}
/* rotate 旋转的三角 */
.box4 {
position: relative;
width: 240px;
height: 32px;
border: 2px solid slategray;
}
.box4::after {
content: "";
position: absolute;
top: 7px;
right: 10px;
width: 10px;
height: 10px;
border-bottom: slategray solid 2px;
border-right: slategray solid 2px;
transform: rotate(45deg);
transition: all 0.2s;
}
.box4:hover::after {
transform: rotate(-135deg);
top: 13px;
}
/* rotate 围绕某一个点旋转 */
.box5 {
margin: 10px 10px;
width: 100px;
height: 100px;
background-color: seagreen;
overflow: hidden;
}
.box5::before {
display: block;
content: "233";
width: 100%;
height: 100%;
background-color: pink;
transform: rotate(90deg);
transform-origin: left bottom;
transition: all 2s;
}
.box5:hover::before {
transform: rotate(0deg);
}
/* scale */
.box6 {
margin: 10px 10px;
height: 100px;
}
.box6 div{
float: left;
margin-right: 10px;
overflow: hidden;
}
.box6 img{
width: 200px;
height: 100px;
transition: all .3s;
}
.box6 div:hover img{
transform: scale(1.1);
}
.box7{
margin-top: 10px;
}
.box7 li{
list-style: none;
float: left;
margin-right: 10px;
padding: 5px 5px;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
border: slategrey solid 2px;
border-radius: 20px;
transition: all 0.2s;
}
.box7 li:hover{
transform: scale(1.2);
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3">
<div class="son"></div>
</div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6">
<div><a href="#"><img src="./images/image01.jpg" alt="中华小当家"></a></div>
<div><a href="#"><img src="./images/image01.jpg" alt="中华小当家"></a></div>
<div><a href="#"><img src="./images/image01.jpg" alt="中华小当家"></a></div>
</div>
<div class="box7">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div>
</body>
</html>