学习了一点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>

css 2D转换 transform-rotate 画插图的更多相关文章

  1. CSS 2D 转换

    通过CSS 2D转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. 2D转换一共五个属性:transfrom=> translate(X轴数值px,Y轴数值px):元素从其当前位置移动,根据 ...

  2. CSS新特性之2D转换transform

    transform是css3中具有颠覆性特征之一,可以实现元素的位移.旋转.缩放等效果 1.位移translate 1.1语法 transform: translate(x,y);//x,y分别表示x ...

  3. css 2D转换总结

    CSS中2D转换的形式是这样的: 选择器{ transform:转换函数(参数,参数): } 其中transform(是transform 不是transfrom)定义元素的2D或者3D转换: 2D转 ...

  4. CSS 2D转换

    转换是使元素改变形状.尺寸和位置的一种效果.通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸,可以大致分为2D转换和3D转换.下面介绍的是2D转换的相关知识点. 首先,CSS中2D ...

  5. CSS 2D转换 matrix() 详解

    2D转换 IE10.Firefox.Opera 支持 transform 属性 Chrome.Safari 需要前缀 -webkit- . IE9 需要前缀 -ms- . translate():接收 ...

  6. 【Demo】CSS3 2D转换

    2D转换transform 2D变换方法: translate() 根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动. div { transform: translate(50px,1 ...

  7. CSS 3学习——transform 2D转换

    首先声明一点,transform属性不为none的元素是它的定位子元素(绝对定位和固定定位)的包含块,而且对内创建一个新的层叠上下文. 注意:可以通过 transform-box 属性指定元素的那个盒 ...

  8. CSS中2d转换：transition过渡放在:hover伪类中与应用在整个元素中区别

    css的2d转换十分强大,能够在不使用js的情况下,实现页面的元素与用户之间更多动态的交互,增强用户体验.其中使用最多的就是hover伪类. 1.创建一个页面的div元素: <!DOCTYPE ...

  9. CSS3 Transform变形(2D转换)

    Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开始,结束.Animation:对元素某个属性 ...

随机推荐

  1. Akka（4）： Routers - 智能任务分配

    Actor模式最大的优点就是每个Actor都是一个独立的任务运算器.这种模式让我们很方便地把一项大型的任务分割成若干细小任务然后分配给不同的Actor去完成.优点是在设计时可以专注实现每个Actor的 ...

  2. ovs + kernel datapath 的分片与重组流程

    非VXLAN的收发包调用栈 netdev_frame_hook()      netdev_port_receive()           ovs_vport_receive()           ...

  3. ASP微信开发获取用户经纬度

    wx.config({ //debug: true, debug: true, appId: '<%= appId %>', timestamp: '<%= timestamp %& ...

  4. Android面试题目2

    1. 请描述下Activity的声明周期. onCreate->onStart->onRemuse->onPause->onStop->onRestart->onD ...

  5. struts2 Unable to load configuration. - bean - jar:file:struts2-core-2.2.3.jar!/struts-default.xml:29:72

    今天启动tomcat的时候发现如下错误记录一下! 从stackoverflow上找到 原因是加入了多个struts2包 删除相同的包即可!!

  6. Unable to find 'struts.multipart.saveDir' property setting.

    今天在项目开发中遇到如下问题 项目使用的是struts2 Unable to find 'struts.multipart.saveDir' property setting. 后来在网上查询特此记录 ...

  7. ztree学习笔记（一）

    在项目当中,经常会用到ztree树形插件,之前做的几个项目当中都用到了这个插件,感觉功能还是很强大的,而且在网上还找到了中文的API,因为项目中的树形结构不是自己做的,所以现在从头学习一下,并且记录一 ...

  8. Ubuntu发行版升级

    从UK 13.10升级到UK 14.10 方法一: 1.sudo apt-get update   2.sudo update-manager -c -d   3.选择upgrade(升级)  方法二 ...

  9. 浏览器内核 网址分解 web服务器

    浏览器最核心的部分是渲染引擎(Rendering Engine),我们一般习惯称之为"浏览器内核",其负责解析网页语法(如标准通用标记语言的子集HTML.JavaScript)并渲 ...

  10. ecshop商品页增加编辑器fckeditor

    最近在做ecshop的项目,需要在商品单页中增加一项FCKEditor的文本编辑器,但在ecshop的论坛和百度里搜出的方法,试了好几个都没有用,终于找到一个可以正确使用的,和大家分享. ecshop ...