转换(transform)
移动(translate)类似于定位
旋转(rotate)
缩放(scale)
移动:
translate(x,y)或者分开写
translateX(n)
translateY(n)
移动沿x,y轴移动
不影响其他盒子
百分比是相对与自身元素的
对行内标签无效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 移动盒子的位置:定位、盒子的外边距、2D转换移动 */
div {
position: relative;
width: 500px;
height: 500px;
background-color: pink;
/* transform: translate(100px, 100px); */
/* transform: translate(100px, 0);Y不可省略 */
/* transform: translateX(100px); */
/* Y同理 */
/* transform: translateX(50%); */
/* 实现垂直居中 定位配合转换*/
transform: ;
}
p {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
background-color: red;
transform: translate(-50%, -50%);
}
span {
transform: translate(30px, 30px);
}
/* 行内元素无效 */
</style>
</head>
<body>
<div>
<p></p>
</div>
<span></span>
</body>
</html>
旋转:
角度为正时顺时针,反之逆时针
默认旋转点的中心点为元素中心点
可以设置旋转中心点:transform-origin:x y;(默认是50%,xy可以是像素/方位名词)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
width: 150px;
/* 顺时旋转45 */
/* transform: rotate(45deg); */
border-radius: 50%;
border: 5px solid pink;
/* 过渡写到本身上,谁过渡给谁加 */
transition: all 3s;
}
/* 鼠标放上去旋转360 */
img:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<img src="123.jpg" alt="">
</body>
</html>
缩放:
逗号分隔
里面的数字就是倍数
三者可以进行缩写:transform:translate(50px,50px)rotate(180deg)scale(1,1)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
/* 也可以设置变换中心点 */
}
div:hover {
/* 1.里面的数字不跟单位,就是倍数的意思1就是1倍2就是2倍(宽度,高度) */
/* transform: scale(2, 4) */
/* 等比例缩放同时修改高和宽 */
/* transform: scale(2); */
/* 进行缩小小于1就是缩放 */
/* transform: scale(0.5); */
/* scale优势之处:不会影响其他的盒子,且可以设置缩放中心点 */
/* 直接设置改变宽和高是向下面和两边缩放 */
transform: scale(2);
}
</style>
</head>
<body>
<div>
</div>
123
</body>
</html>