CSS3 变换也叫 2D/3D转换，主要包括以下几种： 旋转 (rotate) 、 扭曲 (skew) 、 缩放 (scale) 和 移动 (translate) 以及 矩阵变形 (matrix) 。transform 属性常和 transition 一起使用来构造绚丽的过渡动画效果。
本文涉及的内容较多，不太好理解，需要耐心认真阅读。
小试牛刀 body { margin:60px; } div.polaroid { width:294px; padding:10px 10px 20px 10px; border:1px solid #BFBFBF; background-color:white; box-shadow:2px 2px 3px #aaaaaa; transition: transform 1s; -ms-transition: -ms-transform 1s; -moz-transition: -moz-transform 1s; -webkit-transition: -webkit-transform 1s; -o-transition: -o-transform 1s; } /* 鼠标滑过图片归正 */ div.polaroid:hover { -ms-transform:rotate(0); /* IE 9 */ -moz-transform:rotate(0); /* Firefox */ -webkit-transform:rotate(0); /* Safari and Chrome */ -o-transform:rotate(0); /* Opera */ transform:rotate(0); } div.rotate_left { float:left; -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* Firefox */ -webkit-transform:rotate(7deg); /* Safari and Chrome */ -o-transform:rotate(7deg); /* Opera */ transform:rotate(7deg); } div.rotate_right { float:left; -ms-transform:rotate(-8deg); /* IE 9 */ -moz-transform:rotate(-8deg); /* Firefox */ -webkit-transform:rotate(-8deg); /* Safari and Chrome */ -o-transform:rotate(-8deg); /* Opera */ transform:rotate(-8deg); }
上海鲜花港的郁金香，花名：Ballade Dream。
查看更多关于CSS3变换_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did113824