HTML中的旋转 扭曲 平移 缩放

来源:互联网 发布:真三国无双7mac版 编辑:程序博客网 时间:2024/06/06 01:25
<title>无标题文档</title>
<style>
#div{
    width:100px;
height:300px;
background:#00F;
transform:translate(100px,100px);
}
.div2{

width:150px;
height:50px;
background:#FF0;
transform:rotate(30deg);}

.div3{
width:120px;
height:150px;
background:#0FF;
transform:scale(2,1);
margin-left:200px;}

.div4{
width:200px;
height:100px;
background:#F00;
transform:skew(20deg,30deg);
margin-left:300px;}

</style>
</head>


<body>


<div id="div">平移</div>
<div class="div2">旋转</div>
<div class="div3">缩放</div>
<div class="div4">扭曲</div>
</body>
原创粉丝点击