您的位置：首页 > Web前端 > CSS

CSS3 transform.html

2015-08-09 22:05 543 查看

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body, div {
margin:0;
padding:0;
}
div {
width: 100px;
height: 100px;
background-color: burlywood;
margin-left: 50px;
border: 1px solid red;
display: inline-block;/*不换行，但是可以设置width跟height*/
}
/*
translate(tx, ty)
该函数设置html组件横向移动tx距离，纵向移动ty距离。如果ty省略那么，默认是0。
translate(tx) -> translateX(tx)
translate(ty) -> translateY(ty)
*/
.translate-original {}
.translate-now {
-webkit-transform: translate(10px, 10px);
}
/*
rotate(angle)单位是deg
该函数设置html组件顺时针旋转angle角度
*/
.rotate-now {
-webkit-transform: rotate(30deg);
}
/*
scale(sx, sy);
该函数设置设置HTML组件上横向缩放比为sx，纵向缩放比为sy，如果只写一个参数，sy省略，默认是1。
另外如果你写scale(sx) 也可写作 scaleX(sx)
scale(sy) 也可写作scaleY(sy)
*/
.scale-now {
-webkit-transform: scale(1.5, 0.5);
}
.scale-now2 {
-webkit-transform: scale(0.5, 1.5);
}
/*
skew(sx, sy)
该函数设置html组件沿着x轴倾斜sx角度，沿着y轴倾斜sy角度
skewX(sx) skewY(sy)
*/
.skew-now {
-webkit-transform: skew(45deg, 0deg);
}
.skew-now2 {
-webkit-transform: skewY(45deg);
}
/*复合*/
.component {
-webkit-transform: skewY(45deg) scale(1.5, 0.5);
}
/*指定中心点*/
.center {
-webkit-transform: skewY(45deg);
-webkit-transform-origin: left top;
}
</style>
</head>
<body>
<div>文字</div>
没有变动
<div>文字</div>
<hr/>
<div>文字</div>
移动10px 10px
<div class="translate-now">文字</div>
<hr/>
<div>文字</div>
旋转30度
<div class="rotate-now">文字</div>
<hr/>
<div>文字</div>
缩放1.5, 0.5
<div class="scale-now">文字</div>
<hr/>
<div>文字</div>
缩放0.5, 1.5
<div class="scale-now2">文字</div>
<hr/>
<div>文字</div>
x轴倾斜45度
<div class="skew-now">文字</div>
<hr/>
<div>文字</div>
y轴倾斜45度
<div class="skew-now2">文字</div>
<hr/>
<div>文字</div>
y轴倾斜45度 并且缩放1.5，0.5
<div class="component">文字</div>
<hr style="margin-top: 50px"/>
<div>文字</div>
y轴倾斜45度 中心为left top
<div class="center">文字</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航