<!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>Document</title> <style> body{ background-color: rgb(236, 236, 236); } .box1{ width: 200px; height: 200px; background-color: #bfa; margin: 0 auto; margin-top: 200px; /* 变形指通过css改变元素形状或位置 变形不会影响页面布局 transform 设置元素变形效果 平移 translateX() 沿x轴方向平移 translateY() 沿y轴方向平移 translateZ() 沿z轴方向平移 平移元素，百分比相对于自身计算 */ transform:translateX(100%); } /* .box2{ width: 200px; height: 200px; background-color: orange; margin: 0 auto; } */ .box3{ background-color: orange; position: absolute; left: 50%; transform: translateX(-50%) translateY(-50%); } .box4,.box5{ width: 220px; height: 300px; background-color: #fff; float: left; margin: 0 10px; transition: all .3s; } .box4:hover,.box5:hover{ transform: translateY(-10px); box-shadow: 0 0 10px rgba(0, 0, 0, .3); } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <!-- <div class="box3">aaa</div> --> <div class="box4"></div> <div class="box5"></div> </body> </html>
变形指通过改变元素形状或位置
变形不会影响到页面布局
transform 设置元素变形效果
平移
translateX 沿x轴方向平移
translateY 沿y轴方向平移
translateZ 沿z轴方向平移
平移元素，百分比相对于自身计算
<!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>Document</title> <style> html{ /* 设置当前网页的视距800px ，人眼距离网页的距离 */ perspective: 800px; } body{ border: 1px red solid; background-color: rgb(241, 241, 241); } .box1{ width: 200px; height: 200px; background-color: #bfa; margin: 200px auto; /* z轴平移调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离 距离越大，元素离人越近 z轴属于立体效果（近大远小），默认网页不支持透视，要看到效果，必须设置网页的视距 */ transition: 2s; } body:hover .box1{ transform: translateZ(200px); } </style> </head> <body> <div class="box1"></div> </body> </html>
html{
/* 设置当前网页的视距800px ，人眼距离网页的距离 */
perspective: 800px;
}
这是设置当前网页的视距
z轴平移调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离
距离越大，元素离人越近
z轴属于立体效果，默认网页不支持透视，必须设置网页的视距
<!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>Document</title> <style> html { /* 设置当前网页的视距800px ，人眼距离网页的距离 */ perspective: 800px; } body { border: 1px red solid; background-color: rgb(241, 241, 241); } .box1 { width: 200px; height: 200px; background-color: #bfa; margin: 200px auto; transition: 2s; } body:hover .box1 { /* 旋转使元素沿 x y 或 z旋转指定角度 rotateX rotateY rotateZ */ transform: rotateY(180deg); /* 是否显示元素的背面 */ backface-visibility: hidden; } </style> </head> <body> <div class="box1"></div> </body> </html>
旋转使元素沿 x y 或z旋转指定角度
rotateX
rotateY
rotateZ
<!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>Document</title> <style> .box1{ width: 100px; height: 100px; background-color: #bfa; transition: 2s; margin: 100px auto; /* 变形的原点 默认值 center */ transform-origin: 0 0; } .box1:hover{ /* 对元素进行缩放 scaleX() 水平方向缩放 scaleY() 垂直方向缩放 scale() 双方向缩放 */ transform: scale(.2); } .img-wrapper{ width: 200px; height: 200px; border: 1px red solid; } </style> </head> <body> <div class="box1"></div> <div class="img-wrapper"></div> </body> </html>
对元素进行缩放
scaleX 水平方向缩放
scaleY 垂直方向缩放
scale 双方向缩放