五、CSS高级技巧(接上篇)
2D变形（transform） 1.移动 translate(x,y) translate移动平移的意思 注：translate移动的距离如果是按 % 的话 则不是以父亲的宽度为准，而是以自己的为准 缩放 scale(x,y) 3.旋转 rotate(deg)4.旋转中心点（transform-origin）5.倾斜 skew(deg,deg) 3D变形 1.rotateX() 2.rotateY() 3.rotateZ() 4.透视（perspective）5.translateX(x) 6.translateY(y) 7.translateZ(z) 注： 3D变形(translateZ)加透视（pespective）加过渡（transition）
8.translate3d transform: translate3d(x，y，z)； x和y可以是px也可以是% z只能是px;
9.开门案列 利用的相关知识：（position子绝父相，pespective 透视，transition 过渡 ，transform-origin 设置旋转中心，transform:rotate 旋转，transform:translate 移动，鼠标经过hover） 代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>开门大吉</title> <style> section { width: 388px; height: 300px; margin: 100px auto; position: relative; perspective: 1000px; background: url(img/chu.jpg); } .left,.right { width: 50%; height: 100%; background: url(img/bg.png); position: absolute; top: 0; transition: all 0.5s; box-sizing: border-box; border: 1px solid black; } .left { left: 0; } .right { right: 0; } section:hover .left { transform: rotateY(-120deg); /*设置旋转角度*/ transform-origin: left; /*设置旋转中心*/ } section:hover .right { transform-origin: right; transform: rotateY(120deg); } .left::before, .right::before { /*利用伪元素before 创建盒子*/ content: ""; width: 20px; height: 20px; position: absolute; top: 50%; transform: translateY(-50%); /*利用2D变形 使盒子水平居中*/ border-radius: 50%; background-color: black; } .left::before{ right: 0; margin-right: 5px; } .right::before { left: 0; margin-left: 5px; } </style> </head> <body> <section> <div class="left"></div> <div class="right"></div> </section> </body> </html> 动画（css3） 六、伸缩布局（CSS3） display:flex； 伸缩布局模式 在父级添加 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>携程网</title> <style> * { padding: 0; margin: 0; } ul { list-style: none; } body { min-width: 320px; max-width: 840px; margin: 0 auto; } header { width: 100%; height: 100px; } img { width: 100%; height: 100%; } nav { padding: 5px; } .row { width: 100%; height: 90px; background-color: pink; border-radius: 8px; display: flex; /*伸缩布局 给父亲加*/ margin-bottom: 5px; } .row3 { flex: 1; border: 1px solid #FFFFFF; } .row :first-child { border: 0; } .hotel { display: flex; flex-direction: column; } .hotel a { flex: 1; text-decoration: none; text-align: center; line-height: 45px; font-size: 16px; color: #FFFFFF; text-shadow: 0 1px 2px rgba(255,255,255,0.5); } .hotel a:first-child { border-bottom: 1px solid #FFFFFF; } </style> </head> <body> <header> <img src="img/ctrip.jpg"/> </header> <nav> <div class="row"> <div class="row3">1</div> <div class="row3 hotel"> <a href="#">酒店</a> <a href="#">旅馆</a> </div> <div class="row3 hotel"> <a href="#">酒店</a> <a href="#">旅馆</a> </div> </div> <div class="row"> <div class="row3">2</div> <div class="row3 hotel"> <a href="#">酒店</a> <a href="#">旅馆</a> </div> <div class="row3 hotel"> <a href="#">酒店</a> <a href="#">旅馆</a> </div> </div> <div class="row"> <div class="row3">3</div> <div class="row3 hotel"> <a href="#">酒店</a> <a href="#">旅馆</a> </div> <div class="row3 hotel"> <a href="#">酒店</a> <a href="#">旅馆</a> </div> </div> </nav> </body> </html>3.justify-content 属性 调整主轴对齐 4.align-items 属性 调整侧轴对齐 5.flex-wrap 属性 控制是否换行 6.flex-flow 属性 7.align-content 属性堆栈对齐 8.order 属性 控制子项目的排序方式
