2D转换方法:transform()、rotate()、scale()、skew()、matrix() 3D转换方法:rotateX()、rotateY() 1.示例代码 <!DOCTYPE html><html lang=”en”><head> <meta charset=”UTF-8″> <title>2D、3D转换</title> <style> section{width: 200px;height: 200px;background-color: red;} /*.then{*/ /*transform: translate(100px,100px);*/ /*-moz-transform: translate(100px,100px);!*Firefox*!*/ /*-webkit-transform: translate(100px,100px);!*Chrome、Safari*!*/ /*-o-transform: translate(100px,100px);!*Opera*!*/ /*-ms-transform: translate(100px,100px);!*IE*!*/ /*}*/ /*.then{transform: rotate(100deg);*/ /*-moz-transform: rotate(100deg);*/ /*-webkit-transform: rotate(100deg);*/ /*-o-transform: rotate(100deg);*/ /*-ms-transform: rotate(100deg);*/ /*}*/ /*.then{transform: scale(1.2,1.2);!*宽度、高度倍数*!*/ /*-moz-transform: scale(1.2,1.2);*/ /*-webkit-transform: scale(1.2,1.2);*/ /*-o-transform: scale(1.2,1.2);*/ /*-ms-transform: scale(1.2,1.2);*/ /*position: relative;*/ /*left: 300px;*/ /*}*/ /*.then{*/ /*transform: skew(20deg,20deg);!*x,y倾斜角度*!*/ /*-moz-transform: skew(20deg,20deg);*/ /*-webkit-transform: skew(20deg,20deg);*/ /*-o-transform: skew(20deg,20deg);*/ /*-ms-transform: skew(20deg,20deg);*/ /*position: relative;*/ /*left: 10px;*/ /*}*/ /*.then{*/ /*transform: rotateX(150deg);*/ /*-moz-transform: rotateX(150deg);*/ /*-webkit-transform: rotateX(150deg);*/ /*-o-transform: rotateX(150deg);*/ /*-ms-transform: rotateX(150deg);*/ /*}*/ .then{ transform: rotateY(150deg); -moz-transform: rotateY(150deg); -webkit-transform: rotateY(150deg); -o-transform: rotateY(150deg); -ms-transform: rotateY(150deg); } </style></head><body> <section></section><br/> <section class=”then”></section></body></html> 2.示例效果图 图1: sco 图2: 图3: 图4: 图5: