CSS3中的2D转换
通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。
转换是使元素改变形状、尺寸和位置的一种效果。
注:Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
Chrome 和 Safari 需要前缀 -webkit-。
属性transform,其值有以下四种:
1,translate()
通过 translate( px, px) 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数。
2,rotate()
通过 rotate( deg) 方法,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。
3,scale()
通过 scale(n,n) 方法,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数。元素尺寸放大,缩小。
4,skew()
通过 skew( deg, deg) 方法,元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数。
CSS3中的2D转换的更多相关文章
- css3 中的2D转换
一.CSS3转换 通过转换实现对对元素进行旋转.缩放.移动.拉伸的效果:这种原来必须要通过JS或者图片处理才可以实现的效果,现在都可以通过CSS3来完成. 2D转换采用transform属性来实现效果 ...
- 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;"& ...
随机推荐
- papi酱视频因违规遭下线整改,你知道原因吗?
今日4月18日,在微信上的一篇<papi酱遭广电总局封杀 罗振宇1200万恐打水漂>的文章迅速转了起来,说的就是现在网红第一人“papi酱”的视频被广电总局责令下架的消息.箭头直指papi ...
- 一步一步来做WebQQ机器人-(二)(第一次登陆)
// 预计会有这些步骤,当然某些步骤可能会合并: 验证码 第一次登陆 第二次登陆 保持在线和接收消息 获取好友和群列表 发送消息 变成智能的(*゚∀゚*) webqq的登陆,分为2步,本文主要讲第一次 ...
- Codevs 1021 玛丽卡
Codevs 1021 玛丽卡 题目地址:http://codevs.cn/problem/1021/ 题目描述 Description 麦克找了个新女朋友,玛丽卡对他非常恼火并伺机报复. 因为她和他 ...
- 混合App 框架选型
个人一直想做个App,但是学习 IOS 的过程发现 原生的做界面还是听麻烦的就放弃了.后来就转到混合式App阵营了 混合式App 定义 Hybrid App(混合模式移动应用)是指介于web-app. ...
- Kafka组件监控
Kafka web console http://blog.csdn.net/hengyunabc/article/details/40431627 KafkaOffsetMonitor http:/ ...
- iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案—scrollIntoView()
问题描述 iOS系统下,移动web页面,inpu获取焦点弹出系统虚拟键盘时,偶尔会出现挡住input的情况,尽管概率不大,但是十分影响用户体验. 问题重现 原始页面:页面中有header.main.f ...
- 《Linux内核分析》第二周 操作系统是如何工作的?
[刘蔚然 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000] WEEK TWO(2 ...
- 优化SQL Sever查询语句的几个要点
1.不要在Where子句中的“=”左边进行函数.算术运算或其他表达式运算,否则系统将可能无法正确使用索引. 2.尽量不要在Where条件中使用函数,否则将不能利用索引. 3.在Where条件中使用明确 ...
- Git branch 和 Git checkout常见用法
git branch 和 git checkout经常在一起使用,所以在此将它们合在一起 1.Git branch 一般用于分支的操作,比如创建分支,查看分支等等, 1.1 git branch 不带 ...
- RDIFramework.NET ━ .NET快速信息化系统开发框架 ━ 工作流程组件WinForm业务平台
RDIFramework.NET ━ .NET快速信息化系统开发框架 工作流程组件WinForm业务平台 接上篇: RDIFramework.NET ━ .NET快速信息化系统开发框架 ━ 工作流程组 ...