标签：absolute abs 平移 使用 pre type orm :hover 缩小
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>
标签：absolute abs 平移 使用 pre type orm :hover 缩小
原文地址：https://www.cnblogs.com/fsg6/p/12681824.html
