一、CSS3转换

通过转换实现对对元素进行旋转、缩放、移动、拉伸的效果；这种原来必须要通过JS或者图片处理才可以实现的效果，现在都可以通过CSS3来完成。 2D转换采用transform属性来实现效果。

二、transform属性的取值

  • rotate()函数   是可以进行旋转的函数
  • scale()函数    可以进行缩放的函数

三、函数的用法

transform:rotate( deg);旋转

  • 将transform属性的取值设置为rotate函数，在括号里的是旋转的角度，其单位是deg（degree程度），所需要设置角度的值可以是正值，也可以是负值。
  • 正值按照顺时针进行旋转（向左）；负值按照逆时针进行旋转（向右）
  • 在我们编辑代码的时候可以使用 trsf 扩展 前缀也会随之被扩展出来（随机，输入trsf不一定出现的是transform:rotate()属性值）

实例一：

构建一个div盒子，实现鼠标悬停时盒子顺时针旋转30deg的效果。（如果我们将角度设置为负值，则会向左侧倾斜）

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>2D转换</title>
  6.      <style>
  7.      body{
  8.          position: relative;
  9.          width: 400px;
  10.          height: 400px;
  11.          /*top: 100px;*/
  12.          /*left: 100px;*/
  13.          /*border:2px solid red;*/
  14.  
  15.             }
  16.      div{
  17.          width: 100px;
  18.          height: 75px;
  19.          background-color: #939;
  20.          border:2px solid blue;
  21.          position: absolute;
  22.      }
  23.      #rotateDiv{
  24.          top:300px;
  25.          left:100px;
  26.      }
  27.      #rotateDiv:hover{
  28.          transform:rotate(30deg);
  29.          ;}
  30.      </style>
  31.  </head>
  32.  <body>
  33.      <div id="rotateDiv">transform2</div>
  34.  </body>
  35.  </html>

表现效果：

transform:scale(x，y); 缩放

  • 将transform属性的取值设置为scale函数时，则可以设置水平方向和垂直方向上的缩放比例。
  • x：水平方向（横向的）缩放的倍数。y：垂直方向（高度）上的缩放的倍数，若省略，同x的取值（如transform:scale(1.3)表示水平和垂直都是1.3倍数）
  • x和y的取值设置在（0~1）之间表示缩小，（>1）表示放大

实例二：

实现盒子鼠标悬停上时，盒子放大1.3倍的效果。

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>2D转换</title>
  6.      <style>
  7.      body{
  8.          position: relative;
  9.          width: 400px;
  10.          height: 400px;
  11.          /*top: 100px;*/
  12.          /*left: 100px;*/
  13.          /*border:2px solid red;*/
  14.             }
  15.      div{
  16.          width: 100px;
  17.          height: 75px;
  18.          background-color: #939;
  19.          border:2px solid blue;
  20.          position: absolute;
  21.      }
  22.      #box1:hover{transform:scale(1.3)}
  23.      </style>
  24.  </head>
  25.  <body>
  26.      <div id="box1">transform1</div>
  27.  </body>
  28.  </html>

表现效果：

css3 中的2D转换的更多相关文章

  1. CSS3中的2D转换

    通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. 转换是使元素改变形状.尺寸和位置的一种效果. 注:Internet Explorer 10.Firefox 以及 Opera 支 ...

  2. css3 字体、2D转换、3D转换

    学习篇之CSS3 字体.2D转换.3D转换 一.字体 @font-face 将字体文件存放到 web 服务器上,通过CSS3 @font-face规则中定义,它会在需要时被自动下载到用户的计算机上. ...

  3. CSS3中的2D和3D转换知识介绍

    一  2D转换 转换是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.变形.缩放,甚至支持矩阵方式,配合即将学习的过渡和动画知识,可以取代大量之前只能靠Flash才可以实现的效果. 1.移动 ...

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

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

  5. CSS3如何实现2D转换和3D转换，他们有何区别

    CSS3中2D3D技术的发展,带来了更丰富的视觉效果~他们的实现机理是怎样的呢? 1定义 2D: 能够对元素进行移动,缩放,转动,拉长或拉伸. 3D: 允许对元素进行格式化,在三维空间进行操作.元素改 ...

  6. CC3中的2D转换

    2D转换方法: translate() rotate() scale() skew() matrix() 1.translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动 ...

  7. HTML CSS3中2D转换、3D转换、过渡效果总结

    一.CSS3 2D转换 通过 CSS3 转换,我们可以对元素进行移动.缩放.转动.拉长或拉伸. 特别注意,我们在使用css3动画效果时,必须给他们加相应的浏览器前缀,以便浏览器识别,让我们更好的去应用 ...

  8. CSS3中2D/3D转换、过渡、动画

    转换.过渡.动画 2D 转换 1.translate() 方法 通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数: 实例 d ...

  9. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

随机推荐

  1. windows7如何用键盘模拟鼠标操作

    windows7如何用键盘模拟鼠标操作 https://jingyan.baidu.com/article/6dad5075104907a123e36e38.html 听语音 37453人看了这个视频 ...

  2. 【java】的传值方式

    [java]的传值方式 当你问大多数程序员Java是传值还是传引用的时候,你可能会得到两种答案之一: (1)Java传递原始类型数据时使用的是传值方式:传递对象时则使用传引用方式:String类型的数 ...

  3. 【Python基础】_1 Python简介

    1 Python简介 Python是一种计算机程序设计语言.是一种面向对象的动态类型语言,最初被设计用于编写自动化脚本(shell),随着版本的不断更新和语言新功能的添加,越来越多被用于独立的.大型项 ...

  4. 前端 CSS 继承性和层叠性

    CSS有两大特性:继承性和层叠性 前端 CSS的继承性 前端 CSS层叠性 CSS选择器优先级 前端 CSS 优先级 样式设置important

  5. nodejs 对接微信 express 对接微信

    安装引用 npm install express npm install body-parser npm install express-xml-bodyparser npm install axio ...

  6. sql query执行的顺序

    第一, from,  选择或者join多个表得到基础数据表,所以,联结是第一步要执行的操作,它在获取最基础的数据表: 第二,where,过滤掉基础数据表中不符合条件的行,得到后续操作的数据表: 第三, ...

  7. notepad++通过调用cmd运行java程序

    notepad++运行java程序方法主要有下面两个: 通过插件NppExec运行(自行百度“notepad++运行java”) 通过运行 调用cmd编译执行java程序(下面详细讲解) 点击上面工具 ...

  8. MyBatis二级缓存的笔记及记录

    一.什么是二级缓存: 由于一级缓存是一次性的.临时的:每个会话都会创建一个新的:多个会话之间是不能共享的: 二级缓存用于解决一级缓存的不足:每一个“namespace”都会对应一个二级缓存:执行查询的 ...

  9. lambda map() filter() zip()练习

    练习: 用map来处理字符串列表,把列表中所有人都变成sb,比方alex_sb l=[{'name':'alex'},{'name':'y'}] l=[{'name':'alex'},{'name': ...

  10. Rtools的安装

    long long ago,我在http://cran.r-project.org/bin/windows/Rtools/ 下载到了Rtools30.exe……这是一个神奇的工具……     我Rto ...