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

↗☻【css3】变形transform和变形原点transform-origin

2012-05-14 13:48 405 查看 


<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{margin:0;padding:0;font:12px/1.5 arial;}
.box{width:100px;height:100px;margin:0 100px;}
.box1{background-color:#cc0;}
.box2{background-color:#c00;}
.box3{background-color:#0c0;}
.box4{background-color:#c0c;}
.box1 {
-moz-transform: rotate(10deg) scale(1.00,1.00) translate(0px,0px) skew(0deg,0deg);
-moz-transform-origin: 0% 0%;
-webkit-transform: rotate(10deg) scale(1.00,1.00) translate(0px,0px) skew(0deg,0deg);
-webkit-transform-origin: 0% 0%;
-o-transform: rotate(10deg) scale(1.00,1.00) translate(0px,0px) skew(0deg,0deg);
-o-transform-origin: 0% 0%;
transform: rotate(10deg) scale(1.00,1.00) translate(0px,0px) skew(0deg,0deg);
transform-origin: 0% 0%;
}
.box2 {
-moz-transform: scale(1.50,0.50);
-moz-transform-origin: 0% 0%;
-webkit-transform: scale(1.50,0.50);
-webkit-transform-origin: 0% 0%;
-o-transform: scale(1.50,0.50);
-o-transform-origin: 0% 0%;
transform: scale(1.50,0.50);
transform-origin: 0% 0%;
}
.box3 {
-moz-transform: translate(-50px,0px);
-moz-transform-origin: 0% 0%;
-webkit-transform: translate(-50px,0px);
-webkit-transform-origin: 0% 0%;
-o-transform: translate(-50px,0px);
-o-transform-origin: 0% 0%;
transform: translate(-50px,0px);
transform-origin: 0% 0%;
}
.box4 {
-moz-transform: skew(30deg,0deg);
-moz-transform-origin: 0% 0%;
-webkit-transform: skew(30deg,0deg);
-webkit-transform-origin: 0% 0%;
-o-transform: skew(30deg,0deg);
-o-transform-origin: 0% 0%;
transform: skew(30deg,0deg);
transform-origin: 0% 0%;
}
</style>
</head>
<body>
<div class="box box1">如果丘处机没有路过牛家村，中国将是最发达国家</div>
<div class="box box2">如果丘处机没有路过牛家村，中国将是最发达国家</div>
<div class="box box3">如果丘处机没有路过牛家村，中国将是最发达国家</div>
<div class="box box4">如果丘处机没有路过牛家村，中国将是最发达国家</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航