<!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>
/* 变形不会影响也变得布局 */
.box1{
width: 200px;
height: 200px;
background-color: tomato;
margin: 100px auto 0;
/* 变形就是通过css来改变元素的形状或位置
transform 来设置元素的变形效果
translateX 沿着X轴平移
translateY 沿着Y轴平移
translateZ 沿着Z轴平移
*/
transform: translateX(50%);
/* transform: translateY(100px); */
}
.box2{
/* 因为我没有设置宽高,所以默认为auto,name我想让这个div垂直居中就不能使用margin */
/* 我们可以使用另一种方法,绝对定位+平移 */
background-color: rgb(55, 175, 25);
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2">aaaaadgheuidwdhxjdk</div>
</body>
</html>
26平移-XY轴平移——html
最新推荐文章于 2021-11-14 16:24:01 发布