学习了一点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. 弹出框插件layer使用

    layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 插件官方地址:http://layer.layui.co ...

  2. Redis数据类型之Hash（二）

    前言: Redis hash是一个String类型的field和value的映射表.添加.删除操作复杂度平均为O(1),为什么是平均呢?因为Hash的内部结构包含zipmap和hash两种.hash特 ...

  3. Java IO流--练习2

    1)写一个Java程序,输入3个整数,并求出三个数的最大数和最小数 代码: package 第十二章IO流; import java.io.BufferedReader; import java.io ...

  4. JavaSE教程-04Java中循环语句for，while，do···while

    ** Java的循环语句 ** 引入: 生活中有循环,程序的世界也有循环. 思考:生活中有哪些循环的事情? 总结:什么是循环? 重复做类似的事情,而且有终止条件,如果没有终止条件会是怎样? 类似这样的 ...

  5. java基础-四种方法引用

    实例 直接三角形,通过两边算第三边,目的是为了如何使用这几种方法引用.代码中多有些不合适,尽情原谅. 静态方法引用 接口的参数列表与类中的具体实现方法的参数列表一样,返回值一致. 调用 //静态引用 ...

  6. Shiro眼皮下玩ajax，玩出302 Found(实践得经验)

    2017/06/14这一天,是我玩Shiro安全框架最刻骨铭心的一天.因为Shiro今天给我深深的补了一刀,在这儿我也给各位补一刀吧,其实问题很简单,解决方式也极其简单,只是给各位分享一下这个错误,纯 ...

  7. zookeeper-开始

    ZooKeeper:为分布式应用提供的分布式协调服务 ZooKeeper提供一系列原语用于分布式应用构建更高层次的服务,如同步.配置维护.分组以及命名空间. 设计目标: ZooKeeper足够简单且可 ...

  8. SQL常用命令

    SQL常用命令使用方法: (1) 数据记录筛选: sql="select * from 数据表 where 字段名=字段值 order by 字段名 [desc]" sql=&qu ...

  9. Bash的条件表达式求值

    Bash的条件控制允许两种类型:1)命令的成功或失败 2)逻辑表达式的真假这两种类型都可以通过退出状态($?)来检验,$?=0为真,否则为假 一.命令的成功或失败 通过查看$?值$echo $? 二. ...

  10. Cordova各个插件使用介绍系列（一）—$cordovaSms发送短信

    详情链接地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/cordova-1-cordovasms/ 这是调用手机发送短信的插件 ...