变形平移(x轴y轴)
<!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>变形(x轴y轴)</title> <style> body{ background-color: silver; } .box{ width: 200px; height: 200px; background-color: #bfa; margin: 0 auto; margin-top: 200px; /* 变形指通过css来改变元素的形状或位置 变形不会影响页面的布局 transform用来设置元素的变形效果 translatex()沿着x轴平移 translatey()沿着y轴平移 translatez()沿着z轴平移 平移元素,百分比是相对于自身计算的 */ transform:translatex(100px) } /* .box1{ width: 200px; height: 200px; background-color: red; margin: 0 auto; } */ .box2{ /* width: 100px; height: 100px; */ background-color: blue; position: absolute; /* 这种居中方式只适用于元素的大小确定*/ /* top: 0; left: 0; bottom: 0; right: 0; margin: auto; */ left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); } .box3, .box4{ width: 220px; height: 300px; background-color: #fff; float: left; margin:0 10px; transition:all .3s; } .box3:hover, .box4:hover{ transform: translateY(-5px); box-shadow:0 0 10px rgba(0, 0, 0, .3) } </style> </head> <body> <div class="box"></div> <div class="box1"></div> <div class="box2">1111</div> <div class="box3"></div> <div class="box4"></div> </body> </html>
y轴平移
<!DOCTYPE html> <!-- <html lang="en"> --> <head>