2D Conversion methods: Transform (), rotate (), scale (), skew (), matrix ()3D Conversion Method: Rotatex (), Rotatey ()1. Sample Code<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>2d, 3D conversion </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);! * Width, height multiples *!*/
/*-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 Tilt Angle *!*/
/*-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>
<body>
<section></section><br/>
<section class= "then" ></section>
</body>
2. ExampleFigure 1:
Sco
Figure 2:
Figure 3:
Figure 4:
Figure 5:
CSS3 2D, 3D conversion
