1.transform
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>变形</title> 6 <style> 7 8 .box1{ 9 width: 200px;10 height: 200px;11 background-color: #bfa;12 13 /* 14 15 变形，通过变形可以对元素进行平移、放大、缩小旋转等操作16 所有的变形效果，都不会影响页面的布局，这是元素的外观发生变化17 使用transform 来设置变形的效果18 */19 /* 20 平移21 translateX 沿着x轴平移22 - 正值元素向右移动，负值向左移动（元素没有发生旋转）23 translateY 沿着y轴平移24 - 正值元素向下移动，负值元素向上移动（元素没有发生旋转）25 */26 27 transition: all .2s;28 29 }30 31 .box1:hover{32 /* transform: translateY(-10px); */33 /* box-shadow: rgba(0,0,0,.3) 0 10px 10px; */34 35 /* 平移时百分比的单位是相对于自身进行计算的 */36 transform: translateX(50%);37 }38 39 .box2{40 width: 200px;41 height: 200px;42 background-color: tomato;43 }44 45 46 .box3{47 48 position: absolute;49 background-color: greenyellow;50 51 left: 50%;52 top:50%;53 transform: translateX(-50%) translateY(-50%);54 }55 </style>56 </head>57 <body>58 59 <!-- <div class="box1"></div> -->60 <!-- 61 <div class="box2"></div> -->62 63 <div class="box3">我是一个box3</div>64 65 66 </body>67 </html>
