1.css3的transform属性制作一个标签页,没做浏览器兼容
<!doctype html>
<html>
<head>
<title>HTML5 NOTE DEMO</title>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<style>
html{
background:#ccc;
}
body{
font: 12px normal "微软雅黑";
}
.wrap{
100%;
height:auto;
margin:0 auto;
}
.note{
margin:0 0 20px 0;
padding:0;
list-style:none;
overflow:hidden;
}
.note li{
100px;
height:100px;
margin:30px 0 0 33px;
background:#000;
float:left;
box-shadow:3px 4px 11px #000;
}
.note li h3{
height:20px;
margin:0;
padding:0;
color:white;
border-bottom:1px solid dashed;
background:#def;
}
</style>
</head>
<body>
<h1> Html5 Notes !!</h1>
<h4>@author:luowen<br/>@time:2014-02-21</h4>
<hr/>
<div class="wrap">
<ul class="note">
<li><h3>note 1</h3>this is note 1.Yes You are right!</li>
<li><h3>note 1</h3>this is note 1.Yes You are right!</li>
<li><h3>note 1</h3>this is note 1.Yes You are right!</li>
<li><h3>note 1</h3>this is note 1.Yes You are right!</li>
<li><h3>note 1</h3>this is note 1.Yes You are right!</li>
<li><h3>note 1</h3>this is note 1.Yes You are right!</li>
<li><h3>note 1</h3>this is note 1.Yes You are right!</li>
<li><h3>note 1</h3>this is note 1.Yes You are right!</li>
<li><h3>note 1</h3>this is note 1.Yes You are right!</li>
<li><h3>note 1</h3>this is note 1.Yes You are right!</li>
<li><h3>note 1</h3>this is note 1.Yes You are right!</li>
<li><h3>note 1</h3>this is note 1.Yes You are right!</li>
<li><h3>note 1</h3>this is note 1.Yes You are right!</li>
<li><h3>note 1</h3>this is note 1.Yes You are right!</li>
<li><h3>note 1</h3>this is note 1.Yes You are right!</li>
<li><h3>note 1</h3>this is note 1.Yes You are right!</li>
<li><h3>note 1</h3>this is note 1.Yes You are right!</li>
<li><h3>note 1</h3>this is note 1.Yes You are right!</li>
<li><h3>note 1</h3>this is note 1.Yes You are right!</li>
<li><h3>note 1</h3>this is note 1.Yes You are right!</li>
<li><h3>note 1</h3>this is note 1.Yes You are right!</li>
</ul>
</div>
<script>
//init note deg
$(function(){
$(".note li").each(function(){
switch($(this).index()%5){
case 0:
$(this).css({"transform":"rotate(20deg)","background":"blue"});
/* $(this).css({"transform":"rotate(20deg)","background":"blue","-webkit-transform":"rotate(20deg)","-ms-transform":"rotate(20deg)","-moz-transform":"rotate(20deg)"}); 做兼容ff,chrome IE */
break;
case 1:
$(this).css({"transform":"rotate(-30deg)","background":"yellow"});
break;
case 2:
$(this).css({"transform":"rotate(40deg)","background":"pink"});
break;
case 3:
$(this).css({"transform":"rotate(-20deg)","background":"red"});
break;
case 4:
$(this).css({"transform":"rotate(30deg)","backgrond":"green"});
break;
case 5:
$(this).css({"transform":"rotate(-50deg)","background":"#abcdef"});
break;
}
});
});
</script>
</body>
</html>
