搜索到
1
篇与
的结果
-
2D变换 1. 位移<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>位移</title> <style> /* 1.位移与相对定位相似，都不脱离文档流，不会影响到其他元素 2.与相对定位的区别：相对定位的百分比值，参考的是其父元素；定位的百分比，参考的是其自身 3.浏览器针对位移有优化，与定位相比，浏览器处理位移的效率更高 3.transform可以链式编写，如：transform: translateX(50%) translateY(50%); 4.位移对行内元素无效 5.位移配合定位，可以实现元素的水平垂直居中，如： .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } */ .outer { width: 200px; height: 200px; border: 2px solid black; margin: 0 auto; margin-top: 100px; position: relative; } .inner { width: 200px; height: 200px; background-color: skyblue; /* 水平位移 */ transform: translateX(50%); /* 垂直位移 */ transform: translateY(50%); /* 水平 + 垂直位移 */ transform: translate(50%, 50%); } .inner2 { width: 100px; height: 100px; background-color: orange; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style> </head> <body> <div class="outer"> <div class="inner">你好</div> </div> <div class="outer"> <div class="inner2">你好</div> </div> </body> </html>2. 缩放<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>缩放</title> <style> /* 1.scale的值，可以写负数（几乎不用，容易产生误解） 2.借助缩放，可以实现小于12px的文字 */ .outer { width: 200px; height: 200px; border: 2px solid black; margin: 0 auto; margin-top: 100px; position: relative; } .inner { width: 200px; height: 200px; background-color: skyblue; transform: scale(0.2); } span { display: inline-block; font-size: 20px; transform: scale(0.5); } </style> </head> <body> <div class="outer"> <div class="inner">你好</div> </div> <span>带带大师兄</span> </body> </html>3.旋转 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>旋转</title> <style> .outer { width: 200px; height: 200px; border: 2px solid black; margin: 0 auto; margin-top: 100px; position: relative; } .inner { width: 200px; height: 200px; background-color: skyblue; /* rotateZ(30deg) 等价于 rotate(30deg) */ transform: rotateZ(30deg); } </style> </head> <body> <div class="outer"> <div class="inner">你好</div> </div> </body> </html>4. 扭曲<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>扭曲</title> <style> .outer { width: 200px; height: 200px; border: 2px solid black; margin: 0 auto; margin-top: 100px; position: relative; } .inner { width: 200px; height: 200px; background-color: skyblue; /* transform: skewX(0deg); */ /* transform: skewY(0deg); */ transform: skewX(30deg) skewY(30deg); transform: skew(30deg, 30deg); } </style> </head> <body> <div class="outer"> <div class="inner">你好</div> </div> </body> </html>5. 多重变换<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>多重变换</title> <style> /* 多重变换时，建议把旋转放到最后 */ .outer { width: 200px; height: 200px; border: 2px solid black; margin: 0 auto; margin-top: 100px; } .inner { width: 200px; height: 200px; background-color: skyblue; transform: translate(100px, 100px) rotate(30deg); } </style> </head> <body> <div class="outer"> <div class="inner">你好</div> </div> </body> </html>6. 变换原点<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>变换原点</title> <style> /* transform-origin: 50% 50%; 变换原点在元素中心的位置，百分比是相对于自身的（默认值） transform-origin: left top; 变换原点在元素的左上角 transform-origin: 50px 50px; 变换原点在元素的左上角 50px 50px 的位置 transform-origin: left; 只写一个值的时候，第二个值默认为 50% */ .outer { width: 200px; height: 200px; border: 2px solid black; margin: 0 auto; margin-top: 100px; } .inner { width: 200px; height: 200px; background-color: skyblue; /* 通过关键词 */ /* transform-origin: left top; */ /* 通过像素值 */ /* transform-origin: 50px 50px; */ /* 通过百分比 */ /* transform-origin: 25% 25%; */ /* 只给一个值 */ /* transform-origin: left; */ transform-origin: left top; /* 变换原点位置的改变对 旋转 有影响 */ /* transform: rotate(0deg); */ /* 变换原点位置的改变对 旋转 有影响 */ transform: scale(1.2); /* 变换原点位置的改变对 位移 没有影响 */ /* transform: translate(100px,100px); */ } </style> </head> <body> <div class="outer"> <div class="inner">你好</div> </div> </body> </html>
