HTML學習筆記 cs2D3D展示基礎 第十四節 （原創） 參考使用表
阿新 • • 發佈：2017-09-17
safari 學習筆記 ans com div2 s2d spa har tex
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>動畫</title> <link rel="stylesheet" href="tzy.css" type="text/css"> </head> <body> <div>初始效果div1</div> <br/> <div class="div2">展示div2</div> <br/> <div class="div3">展示div3</div> <br/> <div class="div4">展示div4</div> <br/> <div class="div5">展示div5</div> <br/> <div class="div6">展示div6</div> <br/> <div class="div7">展示div7</div> <br/> <div class="div8">展示div8</div> </body> </html>
div{ width:100px; height:100px; background-color: deepskyblue; border: double; margin: 30px; } .div2{ /*移動*/ transform: translate(200px,100px);/*現在chrome有效果*/ -webkit-transform: translate(200px,100px);/*safari chrome*/ -ms-transform: translate(200px,100px);/*IE*/ -o-transform: translate(200px,100px);/*opera*/ -moz-transform: translate(200px,100px);/*Firefox*/ } .div3{ /*旋轉 */ -webkit-transform: rotate(200deg); -moz-transform: rotate(200deg); -ms-transform: rotate(200deg); -o-transform: rotate(200deg); transform: rotate(200deg); } .div4{ /*縮放(寬度，高度)倍數*/ -webkit-transform: scale(1,2); -moz-transform: scale(1,2); -ms-transform: scale(1,2); -o-transform: scale(1,2); transform: scale(1,2); } .div5{ /*傾斜度數下x,y軸*/ -webkit-transform: skew(20deg,50deg); -moz-transform: skew(20deg,50deg); -ms-transform: skew(20deg,50deg); -o-transform: skew(20deg,50deg); transform: skew(20deg,50deg); } .div6{ /*矩陣(利用矩陣算出偏移量)http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/*/ -webkit-transform: matrix(1, 0, 0, 1, 200, 100); -moz-transform: matrix(1, 0, 0, 1, 200, 100); -ms-transform: matrix(1, 0, 0, 1, 200, 100); -o-transform: matrix(1, 0, 0, 1, 200, 100); transform: matrix(1, 0, 0, 1, 200, 100); } .div7{ /*3d轉換*/ -webkit-transform: rotateX(120deg); -moz-transform: rotateX(120deg); -ms-transform: rotateX(120deg); -o-transform: rotateX(120deg); transform: rotateX(120deg); } .div8{ /*3d轉換*/ -webkit-transform: rotateY(120deg); -moz-transform: rotateY(120deg); -ms-transform: rotateY(120deg); -o-transform: rotateY(120deg); transform: rotateY(120deg); }
HTML學習筆記 cs2D3D展示基礎 第十四節 （原創） 參考使用表