css3样式二
1.2D转换
通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数
如:div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
-o-transform: translate(50px,100px); /* Opera */
-moz-transform: translate(50px,100px); /* Firefox */
}
值 translate(50px,100px) 把元素从左侧移动 50 像素,从顶端移动 100 像素。
通过 rotate() 方法,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。
值 rotate(30deg) 把元素顺时针旋转 30 度。
通过 scale() 方法,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数
值 scale(2,4) 把宽度转换为原始尺寸的 2 倍,把高度转换为原始高度的 4 倍
通过 skew() 方法,元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数
值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度,围绕 Y 轴翻转 20 度
matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素
2.3D转换
通过 rotateX() 方法,元素围绕其 X 轴以给定的度数进行旋转
通过 rotateY() 方法,元素围绕其 Y 轴以给定的度数进行旋转。
3.过渡
div
{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}
上面代码为应用于宽度属性的过渡效果,时长为 2 秒
css3样式二的更多相关文章
- css3-1 css3游戏介绍、css3样式和优先级
css3-1 css3游戏介绍.css3样式和优先级 一.总结 一句话总结:我们写外部css表的时候可以用class,那样使用的人用id修改的话优先级就比我们高,达到目的. 1.html嵌套css样式 ...
- CSS3样式运用,悬浮立体方块
前言 作为后端开发者,了解前端是必须的,所以自己琢磨着弄了弄一个CSS3的阴影运用. 我记得这应该是以前淘宝用过的,PS:现在跑到淘宝去看,好像没有找到了.现在流行扁平化设计,没有了阴影,没有了立体! ...
- 两款CSS3样式可视化在线生成工具
CSS3随着浏览器的升级已经被越来越广泛的运用,合理的运用CSS3可以使你的网站更加美观,并且之前只能用js才能实现的效果也已经可以直接用 CSS3来实现.但是虽然如此,很多浏览器对CSS3的支持还都 ...
- 纯css3样式属性制作各种图形图标
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 鼠标HOVER时区块动画旋转变色的CSS3样式掩码
鼠标hover时区块动画旋转变色的css3样式掩码<!DOCTYPE html> <html> <head> <meta charset="utf- ...
- 几个常用的CSS3样式代码以及不兼容的解决办法
原文:几个常用的CSS3样式代码以及不兼容的解决办法 border-radius实现圆角效果 CSS3代码: -webkit-border-radius:10px; -moz-border-radiu ...
- 几种常用CSS3样式
在我们日常工作中,由于考虑到浏览器的兼容性,所以很少用CSS3样式.关于其标准,W3C 仍然在对 CSS3 规范进行开发.不过,现代浏览器已经实现了相当多的 CSS3 属性.最近学习了CSS3,发现功 ...
- 简单了解css3样式表写法和优先级
css3和css有什么区别?首先css3是css(层叠样式表)技术的升级版本,而css是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...
- CSS3系列二(媒体支持、文字与字体相关样式、盒相关样式)
CSS3媒体支持 在css3中允许我们在不改变内容的情况下,在样式中选择一种页面的布局以精确的适应不同的设备,从而改善用户体验 可以利用meta标签在页面中指定浏览器在处理本页面时按照多少像素的窗口宽 ...
随机推荐
- iOS - + initialize 与 +load
一.+ initialize 方法和+load 调用时机 首先说一下 + initialize 方法:苹果官方对这个方法有这样的一段描述:这个方法会在 第一次初始化这个类之前 被调用,我们用它来初始化 ...
- WinServer2003 文件夹共享 方法设置
文件夹设置: 5.假设我们在E盘有一个wmpub文件夹要设置在网络中共享,让大家都可以看到,首先我们右键点击WMPUB文件夹[共享和安全],弹出对话框,选择[共享此文件夹],点击[权限],弹出的对话框 ...
- brew
brew 又叫Homebrew,是Mac OSX上的软件包管理工具,能在Mac中方便的安装软件或者卸载软件, 只需要一个命令, 非常方便 brew类似ubuntu系统下的apt-get的功能. 安装下 ...
- 自动更新补丁Security Update for Internet Explorer 10 for Windows Server 2008 R2 x64 Edition (KB2964358)失败
下载http://www.microsoft.com/zh-CN/download/details.aspx?id=42581手动安装成功.
- cordova IOS源码浅析
cordova封装了一套js和OC通信的代码,cordova.js下的iOSExex是关键的js去调原生的发起点. function iOSExec() { var successCallback, ...
- [CC]平面拟合
常见的平面拟合方法一般是最小二乘法.当误差服从正态分布时,最小二乘方法的拟合效果还是很好的,可以转化成PCA问题. 当观测值的误差大于2倍中误差时,认为误差较大.采用最小二乘拟合时精度降低,不够稳健. ...
- ca证书校验用户证书
openssl verify -CAfile ca.cer server.crt 现在很多网站和服务都使用了HTTPS进行链路加密.防止信息在传输中间节点被窃听和篡改.HTTPS的启用都需要一个CA证 ...
- 化繁为简,最简易的SqlDataSource配合Cache使用~
最近一个小项目用了比较方便傻瓜的DevExpress控件,实践中DevExpress的控件确实很方便. 在用ASPxGridView控件的时候,为了偷懒结合了SqlDataSource使用,但一直在大 ...
- Linux上 .vimrc文件
在Linux上面对VIM编辑器的格式的设置通常可以提升工作效率,下面对工作机器上的.vimrc文件的内容进行一总结,以备后续的查询 set smarttab set tabstop=4 set shi ...
- 在Eclipse 中使用tomcat8
最新版本的Eclipse让人不支持 Tomcat 8,该方法让Eclipse能使用Tomcat8 第一步:下载最新版本Eclipse for Java EE 第二步:到WTP downloads pa ...