<!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); }