<!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展示基础 第十四节 （原创） 参考使用表
原文地址：http://www.cnblogs.com/ttzzyy/p/7535872.html