CSS3 2D 转换

了解2D变换方法：

translate()
rotate()
scale()
skew()
matrix()

translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

transform:translate(100px,100px);
	-ms-transform:translate(10px,100px); /* IE 9 */
	-webkit-transform:translate(100px,100px); /* Safari and Chrome */

rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。rotate值（30deg）元素顺时针旋转30度。

transform:rotate(30deg);
	-ms-transform:rotate(30deg); /* IE 9 */
	-webkit-transform:rotate(30deg); /* Safari and Chrome */

scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数

div {
    margin: 150px;
    width: 200px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
    border: 1px solid black;
    -ms-transform: scale(2,3); /* IE 9 */
    -webkit-transform: scale(2,3); /* Safari */
    transform: scale(2,3); /* 标准语法 */
}
</style>
</head>
<body>

<p>scale() 方法用于增加或缩小元素的大小。</p>

<div>
div 元素的宽度是原始大小的两倍，高度是原始大小的三倍。
</div>

skew() 方法

语法

transform:skew(<angle> [,<angle>]);

包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

skewX(<angle>);表示只在X轴(水平方向)倾斜。
skewY(<angle>);表示只在Y轴(垂直方向)倾斜。

transform:skew(30deg,20deg);
	-ms-transform:skew(30deg,20deg); /* IE 9 */
	-webkit-transform:skew(30deg,20deg); /* Safari and Chrome */

CSS3 3D 转换

3D 转换

CSS3 允许您使用 3D 转换来对元素进行格式化。

在本章中，您将学到其中的一些 3D 转换方法：

rotateX()
rotateY()

rotateX()方法，围绕其在一个给定度数X轴旋转的元素。

rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。

CSS3 过渡

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

指定要添加效果的CSS属性
指定效果的持续时间。

应用于宽度属性的过渡效果，时长为 2 秒：transition:
width
2s;注意：如果未指定的期限，transition将没有任何效果，因为默认值是0。

多向改变：

-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s, height 2s, transform 2s;

transition:width 1s linear
2s;

CSS3笔记之第四天的更多相关文章

Deep Learning论文笔记之（四）CNN卷积神经网络推导和实现（转）
Deep Learning论文笔记之(四)CNN卷积神经网络推导和实现 zouxy09@qq.com http://blog.csdn.net/zouxy09 自己平时看了一些论文, ...
【Unity Shaders】学习笔记——SurfaceShader（四）用纹理改善漫反射
[Unity Shaders]学习笔记——SurfaceShader(四)用纹理改善漫反射转载请注明出处:http://www.cnblogs.com/-867259206/p/5603368.ht ...
python学习笔记--Django入门四管理站点--二
接上一节 python学习笔记--Django入门四管理站点设置字段可选编辑Book模块在email字段上加上blank=True,指定email字段为可选,代码如下: class Autho ...
VSTO学习笔记（十四）Excel数据透视表与PowerPivot
原文:VSTO学习笔记(十四)Excel数据透视表与PowerPivot 近期公司内部在做一种通用查询报表,方便人力资源分析.统计数据.由于之前公司系统中有一个类似的查询使用Excel数据透视表完成的 ...
Python学习笔记（十四）
Python学习笔记(十四): Json and Pickle模块 shelve模块 1. Json and Pickle模块之前我们学习过用eval内置方法可以将一个字符串转成python对象,不 ...
深度学习课程笔记（十四）深度强化学习 --- Proximal Policy Optimization (PPO)
深度学习课程笔记(十四)深度强化学习 --- Proximal Policy Optimization (PPO) 2018-07-17 16:54:51 Reference: https://b ...
【Git 使用笔记】第四部分：git在公司中的开发流程
先声明几个变量仓管A:主分支,只有master分支仓管B:开发分支,只有各个业务开发分支仓管B fork 于 A 如下图为了保证代码的稳定性,只有仓管B中的某个分支测试完毕并进行了代码r ...
python3.4学习笔记(二十四) Python pycharm window安装redis MySQL-python相关方法
python3.4学习笔记(二十四) Python pycharm window安装redis MySQL-python相关方法window安装redis,下载Redis的压缩包https://git ...
【NPDP笔记】第四章文化组织与团队
此为临时链接,仅用于预览,将在短期内失效.关闭 [NPDP笔记]第四章文化组织与团队小康小康哥的产品之路 9月6日 4.1 文化和氛围对创新的重要性文化:信念,价值观,假设,与期望氛围:直接 ...

随机推荐

JDK+Tomcat+Zookeeper+DubboAdmin安装教程
JDK+Tomcat+Zookeeper+DubboAdmin安装教程 1. 安装内容: JDK 1.8.131 Tomcat 7.0.77 Zookeeper 3.4.9 Dubbo admin 2 ...
用Node.JS+MongoDB搭建个人博客（安装环境）（一）
Node.JS是什么? Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境. Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效. Nod ...
导出EXCEL遇到问题
EXCEL设置的格式要与写入信息的格式要匹配,比如写入信息是字符串类型,而EXCEL单元格是DATE类型则会出错.
Angular页面加载后自动弹窗
首先在控制器内写好一个弹窗,我用的是ionic的默认提示对话框 // 一个确认对话框 $scope.showConfirm = function() { var confirmPopup = $ion ...
Easy DataGrid 实现动态列、行
Easy DataGrid 实现动态列.行前端代码: <title>展示销售的实时数据</title> <script type="text/javascri ...
word2vec原理(二) 基于Hierarchical Softmax的模型
word2vec原理(一) CBOW与Skip-Gram模型基础 word2vec原理(二) 基于Hierarchical Softmax的模型 word2vec原理(三) 基于Negative Sa ...
JavaScript语言精粹-读书笔记
前言:很久之前读过一遍该书,近日得闲,重拾该书,详细研究一方,欢迎讨论指正. 目录: 1.精华 2.语法 3.对象 4.函数 5.继承 6.数组 7.正则表达式 8.方法 9.代码风格 10.优美的特 ...
Vue项目搭建完整剖析全过程
Vue项目搭建完整剖析全过程项目源码地址:https://github.com/ballyalex 有帮助的话就加个星星呗~! 项目技术栈:vue+webpack+bower+sass+axios ...
iOS源码博文集锦2
iOS精选源码快速集成观看直播和开播一款类携程商旅的城市选择界面一个类似于QQ电话的动画效果高德地图定位,导航,轨迹,GPS纠偏真实逻辑滚动数字DPScrollNumberL ...
RabbitMQ 使用场景一
安装环境 1.下载安装 Erlang 运行时环境 2.下载安装 RabbitMQ Server 应用程序 3.启动 RabbitMQ 服务(默认启动) 4.安装管理平台插件并打开远程访问权限 4.1. ...

CSS3笔记之第四天