css3 中的2D转换
一、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转换的更多相关文章
- CSS3中的2D转换
通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. 转换是使元素改变形状.尺寸和位置的一种效果. 注:Internet Explorer 10.Firefox 以及 Opera 支 ...
- css3 字体、2D转换、3D转换
学习篇之CSS3 字体.2D转换.3D转换 一.字体 @font-face 将字体文件存放到 web 服务器上,通过CSS3 @font-face规则中定义,它会在需要时被自动下载到用户的计算机上. ...
- CSS3中的2D和3D转换知识介绍
一 2D转换 转换是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.变形.缩放,甚至支持矩阵方式,配合即将学习的过渡和动画知识,可以取代大量之前只能靠Flash才可以实现的效果. 1.移动 ...
- CSS3 Transform变形(2D转换)
Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开始,结束.Animation:对元素某个属性 ...
- CSS3如何实现2D转换和3D转换，他们有何区别
CSS3中2D3D技术的发展,带来了更丰富的视觉效果~他们的实现机理是怎样的呢? 1定义 2D: 能够对元素进行移动,缩放,转动,拉长或拉伸. 3D: 允许对元素进行格式化,在三维空间进行操作.元素改 ...
- CC3中的2D转换
2D转换方法: translate() rotate() scale() skew() matrix() 1.translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动 ...
- HTML CSS3中2D转换、3D转换、过渡效果总结
一.CSS3 2D转换 通过 CSS3 转换,我们可以对元素进行移动.缩放.转动.拉长或拉伸. 特别注意,我们在使用css3动画效果时,必须给他们加相应的浏览器前缀,以便浏览器识别,让我们更好的去应用 ...
- CSS3中2D/3D转换、过渡、动画
转换.过渡.动画 2D 转换 1.translate() 方法 通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数: 实例 d ...
- CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)
CSS3边框: 1.CSS3圆角:border-radius 属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...
随机推荐
- oracle rman catalog--ORA-01580: error creating control backup file
在测试rman catalog时,错误的设置了snapshot路径,报错 RMAN> show snapshot controlfile name; RMAN configuration par ...
- MSSQL注入--反弹注入
明明是sql注入的点,却无法进行注入,注射工具拆解的速度异常的缓慢,错误提示信息关闭,无法返回注入的结果,这个时候你便可以尝试使用反弹注入, 反弹注入需要依赖于函数opendatasource的支持, ...
- 普通项目——>maven项目——>SSM（一）
首先应该明白,SSM是什么? SSM指的是Spring+SpringMVC+MyBatis Spring Spring就像是整个项目中装配bean的大工厂,在配置文件中可以指定使用特定的参数去调用实体 ...
- 比较css中单位px，em和rem的区别
国内的设计师大都喜欢用px,而国外网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原 ...
- [DS+Algo] 009 树的介绍
目录 1. 树的概念 2. 树的术语 3. 树的种类 4. 常见应用场景 5. 二叉树 1. 树的概念 每个结点(节点)有 0 个或多个子结点 没有父结点的结点称为根结点 每一个非根结点有且只有一个父 ...
- [Git] 017 加一条分支，享双倍快乐
0. 回顾 [Git] 009 逆转未来 中的 "2.2" 讲过 git checkout -- <file> 这回的 git checkout <branch_ ...
- [转帖]怎样选择（FC-SAN）光纤通道（存储）交换机
怎样选择(FC-SAN)光纤通道(存储)交换机 https://blog.csdn.net/sinat_30171789/article/details/50510936 交换机的种类非常多... ...
- 替换url不刷新页面
今天碰到一个有趣的问题, 从其他站点登录后,放回了一个token, 但是我切换了路由之后token还在, 路由直接跟在了token参数后面, 后面先利用location.href替换掉原来的连接, 但 ...
- 背包dp相关
0/1背包 给出n个物品,每个物品有Vi的价值和Wi的费用,我们总共有m块钱,求最多能得到多少价值的物品. N<=10^3,m<=10^3 记录方案数?记录输出方案? 输出方案: 对每个d ...
- 一致性Hash算法（转）
一致性Hash算法提出了在动态变化的Cache环境中,判定哈希算法好坏的四个定义: 1.平衡性(Balance):平衡性是指哈希的结果能够尽可能分布在所有的缓冲(Cache)中去,这样可以使得所有的缓 ...