学习了一点2D转换，关于Transfrom-rotate的小用法
rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
下面看实例
第一个例子是没有使用rotate，而是简单的就写一个容器，然后往容器中填写实物。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>photoshow</title>
<style type="text/css">
body
{
margin:30px;
background-color: #E9E9E9;
text-align: center;
}
div.polaroid
{
width:230px;
padding:10px 10px 20px 10px;
border:1px solid #BFBFBF;
box-shadow: 2px 2px 3px #aaaaaa;
}
</style>
</head>
<body >
<div class="polaroid ">
<img id="first" src="Desktop\11.jpg" alt="" width="220px" height="200px" >
<p >beautiful like summer flowers.</p>
</div>
</body>
</html>
第二个例子用到了transfrom-rotate分别往不同方向叠合
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>photoshow</title>
<style type="text/css">
body
{
margin:30px;
background-color: #E9E9E9;
text-align: center;
}
div.box
{
width:600px;
}
div.polaroid
{
width:250px;
padding:10px 10px 20px 10px;
border:1px solid #BFBFBF;
/* add box-shadow */
box-shadow: 2px 2px 3px #aaaaaa;
}
div.rotate_left
{
float:left;
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
transform:rotate(7deg);
background-color:white;
}
div.rotate_right
{
float:left;
-ms-transform:rotate(-8deg); /* IE 9 */
-webkit-transform:rotate(-8deg); /* Safari and Chrome */
transform:rotate(-8deg);
background-color:white;
}
</style>
</head>
<body align="center">
<div class="box" >
<div class="polaroid rotate_left">
<img id="first" src="Desktop\11.jpg" alt="" width="250px" height="200px" >
<p >beautiful like summer flowers.</p>
</div>
<div id="second" class="polaroid rotate_right">
<img src="Desktop\22.jpg" alt="" width="250px" height="200px" >
<p >death like a autumn leaves.</p>
</div>
</div>
</body>
</html>