一、CSS3转换

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

二、transform属性的取值

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

三、函数的用法

transform:rotate( deg);旋转

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

实例一：

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>2D转换</title>

     <style>

     body{

         position: relative;

         width: 400px;

         height: 400px;

         /*top: 100px;*/

         /*left: 100px;*/

         /*border:2px solid red;*/

            }

     div{

         width: 100px;

         height: 75px;

         background-color: #939;

         border:2px solid blue;

         position: absolute;

     }

     #rotateDiv{

         top:300px;

         left:100px;

     }

     #rotateDiv:hover{

         transform:rotate(30deg);

         ;}

     </style>

 </head>

 <body>

     <div id="rotateDiv">transform2</div>

 </body>

 </html>

表现效果：

transform:scale(x，y); 缩放

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

实例二：

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>2D转换</title>

     <style>

     body{

         position: relative;

         width: 400px;

         height: 400px;

         /*top: 100px;*/

         /*left: 100px;*/

         /*border:2px solid red;*/

            }

     div{

         width: 100px;

         height: 75px;

         background-color: #939;

         border:2px solid blue;

         position: absolute;

     }

     #box1:hover{transform:scale(1.3)}

     </style>

 </head>

 <body>

     <div id="box1">transform1</div>

 </body>

 </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. 中国MOOC_零基础学Java语言_第1周 计算_第1周编程题_1温度转换

    第1周编程题 依照学术诚信条款,我保证此作业是本人独立完成的. 温馨提示: 1.本次作业属于Online Judge题目,提交后由系统即时判分. 2.学生可以在作业截止时间之前不限次数提交答案,系统将 ...

  2. 应用安全 - 中间件漏洞 - Nostromo

     CVE-2011-0751 Date: 2011.3 类型: 路径遍历 PoC:https://nvd.nist.gov/vuln/detail/CVE-2011-0751 CVE-2019-162 ...

  3. 红帽学习笔记[RHCSA] 第一课[Shell、基础知识]

    关于Shell Shell是什么 Shell是系统的用户界面,提供了用户与内核进行交互操作的一种接口.它接收用户输入的命令并把它送入内核中执行. bash shell是大多数Linux的缺省shell ...

  4. 扫描 + 注解完成bean的自动配置

    链接:https://pan.baidu.com/s/1W3TINXNnqpxmkIADOcJZCQ 提取码:fmt5 我们知道,我们一般是通过id或name调用getBean方法来从IOC容器中获取 ...

  5. JAVA日期时间相关库

    Java的日期时间库比较乱,同样一个Date在java.sql下定义,同时也在java.util下也定义了一遍,真不知道SUN是怎么想的. java8以后,java通过jsr310标准引入了一套符合I ...

  6. 全新一台node节点加入到集群中

    目录 前言 对新节点做解析 方法一 hosts 文件解析 方法二 bind 解析 测试 分发密钥对 推送 CA 证书 flanneld 部署 推送flanneld二进制命令 推送flanneld秘钥 ...

  7. 给定一个英文字符串,请编写一个PHP函数找出这个字符串中首先出现三次的那个英文字符(需要区分大小写)，并返回

    给定一个英文字符串,请编写一个PHP函数找出这个字符串中首先出现三次的那个英文字符(需要区分大小写),并返回 //统计字符串中出现的字符的出现次数 public function strNum(){ ...

  8. PHP批量导入excell表格到mysql数据库

    PHP批量导入excell表格到mysql数据库,本人通过亲自测试,在这里分享给大家 1,下载 php  excell类库 网上搜索可以下载,这里不写地址 2,建html文件 <form met ...

  9. P2523 [HAOI2011]Problem c

    传送门 先考虑如何判断无解,设 $sum[i]$ 表示确定的人中,编号大于 $i$ 的人的人数 如果 $sum[i]>n-i+1$ 则无解,进一步考虑设 $f[i][j]$ 表示当前确定完编号大 ...

  10. 03-Django-models

    # Models 模型 - ORM - ObjectRelationMap : 把面向对象思想转换成关系数据库思想.操作上把类等价于表格 - 类对应表格 - 类中的属性对应表中的字段 - 在应用中的m ...