標籤：san firefox font lang relative 1.2 img transform new
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：
CSS3 2D、3D轉換
