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>
旋转（rotate）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> html{ perspective: 800px; } .box1{ width: 200px; height: 200px; background-color: #bfa; margin: 50px auto; transition: all 2s; /* transform: translateZ(100px) rotateY(45deg) ; */ } .box1:hover{ /* rotateX() 表示元素沿着X轴旋转 deg 表示度数 turn 表示圈 rotateY 表示元素沿着Y轴旋转 rotateZ 表示元素沿着Z轴旋转 */ /* transform: rotateX(10turn); */ /* transform: rotateY(1turn) rotateX(1turn); */ /* transform: rotateZ(10turn); */ transform: translateZ(100px) rotateY(45deg) ; } .box2{ width: 200px; height: 200px; background-color: greenyellow; margin: 50px auto; transition: all 2s; /* transform: rotateY(45deg) translateZ(100px) ; */ } .box2:hover{ transform: rotateY(45deg) translateZ(100px) ; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
内容；transform: rotateY(45deg) translateZ(100px) ; 和transform: translateZ(100px) rotateY(45deg) 他们的顺序不一样，出来的效果也不一样。
变形的原点
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 html{ 8 perspective: 800px; 9 } 10 11 .box1{ 12 width: 200px; 13 height: 200px; 14 margin: 100px auto; 15 background-color: #bfa; 16 transition: all 2s; 17 18 /* 19 transform-origin 用来指定变形的原点 20 - 和background-position设置方式是一致的, 21 */ 22 /* transform-origin: top center; 九宫格样式*/ 23 transform-origin: 50px 20px; 24 /* transform-origin: center center; */ 25 } 26 27 .box1:hover{ 28 transform: rotateX(90deg); 29 } 30 31 </style> 32 </head> 33 <body> 34 35 <div class="box1"></div> 36 37 </body> 38 </html>