应用多种变形CSS3 - xiaoleilei

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>应用多种变形</title>
        <style type="text/css">
        /*基本设置*/

body{margin:0;padding:0;font-size:12px;font-family:Arial,"宋体";backgorund:#fff;}/*文档清零,字体,字号,背景设置.*/

div,ul,li,p,form,h1,h2,h3,h4,h5,input,dl,dt,dd,fieldset,table,tr,td{margin:0;padding:0;}/*边界元素清零*/

ul,li,ol{list-style:none;}/*去除列表符号*/

img{border:none;}/*去除图片按钮边框*/

a{text-decoration:none;}/*去除超链接下划线*/
img,input,textarea{vertical-align:middle;}
        div {
            position:absolute;
            width:140px;
            height:140px;
            background-color:#e4105e;
            border:2px solid #000000;
            margin:30px;
        }
          /*.box {
            -moz-transform:rotate(30deg) translate(260px,60px) scale(2.4,0.4);
            -webkit-transform:rotate(30deg) translate(260px,60px) scale(2.4,0.4);
            -o-transform:rotate(30deg) translate(260px,60px) scale(2.4,0.4);
            }*/ /* 该盒子旋转45度；位移100px,30px；缩放2.3,0.3*/

            .box {
            -moz-transform:translate(260px,60px) rotate(30deg) scale(2.4,0.4);
            -webkit-transform:translate(260px,60px) rotate(30deg) scale(2.4,0.4);
            -o-transform:translate(260px,60px) rotate(30deg) scale(2.4,0.4);
            }
            /*如果变换的顺序不同，得到的效果也不同*/
            </style>
</head>
<body>
    <div>文字</div>
    <div class="box">文字</div><br />

</body>
</html>

posted on 2013-06-25 22:02 xiaoleilei 阅读(256) 评论(0) 收藏举报

刷新页面返回顶部