css 2D转换 transform-rotate 画插图

学习了一点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分别往不同方向叠合

}
  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>

巴特西

css 2D转换 transform-rotate 画插图

最新文章

热门文章