学习了一点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. mysqldump命令详解

    1.数据备份的重要性: 保护公司的数据 网站的7x24提供服务 2.MySQL数据库备份: --all-databases , -A 导出全部数据库. mysqldump -uroot -p --al ...

  2. cursor 属性

    鼠标 样式 default 默认光标(通常是一个箭头) auto 默认.浏览器设置的光标. crosshair 光标呈现为十字线. pointer 光标呈现为指示链接的指针(一只手) move 此光标 ...

  3. socket聊天室（服务端）（多线程）（TCP）

    #include<string.h> #include<signal.h> #include<stdio.h> #include<sys/socket.h&g ...

  4. Elasticsearch 与 Kafka 整合剖析

    1.概述 目前,随着大数据的浪潮,Kafka 被越来越多的企业所认可,如今的Kafka已发展到0.10.x,其优秀的特性也带给我们解决实际业务的方案.对于数据分流来说,既可以分流到离线存储平台(HDF ...

  5. jquery页面水印插件，支持多行水印、行错开

    最近工作需求,需要在页面上加水印,但发现网上示例无法满足我的需求,所以还是自己动手写. 有几个特别需求: 1.可以写多行水印,并且中心对齐. 2.每行水印错开. PS:我找到的例子都是单行水印,所以用 ...

  6. 抓包工具-Wireshark（详细介绍与TCP三次握手数据分析）

    功能使用的详细介绍 wireshark(官方下载网站: http://www.wireshark.org/),是用来获取网络数据封包,可以截取各种网络封包,显示网络封包的详细信息,包括http,TCP ...

  7. 【论文：麦克风阵列增强】Signal Enhancement Using Beamforming and Nonstationarity with Applications to Speech

    作者:桂. 时间:2017-06-06 13:25:58 链接:http://www.cnblogs.com/xingshansi/p/6943833.html 论文原文:http://pan.bai ...

  8. Java(14)继承

    1.继承(extends) 1.1 继承:遗传 1.2 语法 public class 子类 extends 父类{ } public class Dog extends Pet{ } public ...

  9. 导入网页数据到 Google Sheet

    数据没有用,我们需要的是数据所反映出来的东西.增长率,排名,占比等.而这些结果是通过分析数据得到的. 从网上搜集到数据后,导入到表格程序中便可以进行方便地分析处理了.下面介绍将网页中的表格数据导入到 ...

  10. Apache和PHP环境配置

    最近闲来想学习一下PHP. 工欲善其事,必先利其器.我的PHP环境配置了三遍,才安装成功. 下面就分享一下我的安装经验. 1.Apache2.4,PHP5.6,MySql5.6这些都是从官网下载的. ...