html2D转换案例,html css学习笔记-2d 3d动画的转换

div{

width: 100px;

height: 100px;

background-color: green;

}

/*移动效果*/

/*.div2{*/

/*x,y移动100*/

/*transform:translate(100px,100px);*/

/*浏览器支持,safrai chrome*/

/*-webkit-transform:translate(100px,200px);*/

/*支持ie 360*/

/*-ms-transform:translate(100px,200px);*/

/*支持opera*/

/*-o-transform:translate(100px,200px);*/

/*支持mozilla firefox*/

/*-moz-transform:translate(100px,200px);*/

/*}*/

/*旋转100*/

/*.div2{*/

/*transform:rotate(100deg);*/

/*浏览器支持,safrai chrome*/

/*-webkit-transform:rotate(100deg);*/

/*支持ie 360*/

/*-ms-transform:rotate(100deg);*/

/*支持opera*/

/*-o-transform:rotate(100deg);*/

/*支持mozilla firefox*/

/*-moz-transform:rotate(100deg);*/

/*}*/

/*缩放 宽度不变，高度变为原来的2倍*/

/*.div2{*/

/*margin-top: 100px;;*/

/*transform:scale(1,2);*/

/*浏览器支持,safrai chrome*/

/*-webkit-transform:scale(1,2);*/

/*支持ie 360*/

/*-ms-transform:scale(1,2);*/

/*支持opera*/

/*-o-transform:scale(1,2);*/

/*支持mozilla firefox*/

/*-moz-transform:scale(1,2);*/

/*}*/

/*顷斜 x,y各50度*/

.div2{

margin-top: 100px;;

transform:skew(50deg,50deg);

/*浏览器支持,safrai chrome*/

-webkit-transform:skew(50deg,50deg);

/*支持ie 360*/

-ms-transform:skew(50deg,50deg);

/*支持opera*/

-o-transform:skew(50deg,50deg);

/*支持mozilla firefox*/

-moz-transform:skew(50deg,50deg);

}

.div3{

transform:rotatX(20deg);

/*浏览器支持,safrai chrome*/

-webkit-transform:rotatX(20deg);

/*支持ie 360*/

-ms-transform:rotatX(20deg);

/*支持opera*/

-o-transform:rotatX(20deg);

/*支持mozilla firefox*/

-moz-transform:rotatX(20deg);

}

这是一个初始div

这是改变后的效果

这是改变后的效果div3