学习了一点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. gradle windows 环境变量

    我的电脑 ->  高级环境变量 GRADLE_HOME    D:\soft\gradle-3.5 path %GRADLE_HOME%\bin

  2. window.opener的用法

    window.opener 主要用来打开窗体的父窗体,可以通过这种方式设置父窗体的值或者调用js方法. 例如: 1,window.opener.test(); ---调用父窗体中的test()方法 2 ...

  3. js实现防盗图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. ReactNative学习之Html基本标签使用

    前言: 前面简单学习了html简单标签的使用,今天学习一下其他的标签的使用. HTML的超链接 1.)创建一个超链接 <div> <p> <a href="ht ...

  5. WebSocket和kafka实现数据实时推送到前端

    一. 需求背景      最近新接触一个需求,需要将kafka中的数据实时推送到前端展示.最开始想到的是前端轮询接口数据,但是无法保证轮询的频率和消费的频率完全一致,或造成数据缺失等问题.最终确定用利 ...

  6. 关于bootstrap中cropper的截图上传问题

    之前做一个关于截图的东东,搞了好久终于弄好了,其主要关键是把前端截图的数据(x坐标,y坐标,宽度,高度和旋转角度)传到后台,然后在后台对图片做相关处理,记录一下方便以后查看. 后台配置为ssm. Ja ...

  7. javacv开发详解之1：调用本机摄像头视频（建议使用javaCV1.3版本）

    javaCV系列文章: javacv开发详解之1:调用本机摄像头视频 javaCV开发详解之2:推流器实现,推本地摄像头视频到流媒体服务器以及摄像头录制视频功能实现(基于javaCV-FFMPEG.j ...

  8. Awesome Hadoop

    A curated list of amazingly awesome Hadoop and Hadoop ecosystem resources. Inspired by Awesome PHP,  ...

  9. windows手动搭建Kotlin命令行环境

    kotlin官网:https://kotlinlang.org 我们可以从GitHub下载.目前最新版本是1.1.2-5 https://github.com/JetBrains/kotlin/rel ...

  10. ionic2 tabs使用自定义图标

    在ionic2中图标是通过类添加的 比如说   tabIcon="homeImg" 在页面中研究可以看到在ios上有一个类是 .ion-ios-homeImg:before 所以我 ...