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 文化和氛围对创新的重要性文化:信念,价值观,假设,与期望氛围:直接 ...

随机推荐

tensorflow Relu激活函数
1.Relu激活函数 Relu激活函数(The Rectified Linear Unit)表达式为:f(x)=max(0,x). 2.tensorflow实现 #!/usr/bin/env pyth ...
（转）rpm安装和卸载软件
场景:在Linux中经常需要安装一些rpm软件,但是有时候安装失误就需要卸载这些软件包. 1 过程记录 1.1 安装 rpm -i 需要安装的包文件名举例如下: rpm -i example.rpm ...
（转）每天一个linux命令（50）：crontab命令
场景:在学习Linux环境下自动部署项目时候,可以通过crontab命令设定定时任务,实现服务端项目的自动部署! 前一天学习了 at 命令是针对仅运行一次的任务,循环运行的例行性计划任务,linux系 ...
【YII】Yii入门
1. 入门博客 http://blog.csdn.net/zm2714/article/category/1359776/2 2. 创建运行demo http://blog.csdn.net/zhou ...
Java之IO流概述和File基本操作
IO流图解 IO(in / out)流的分类流向: 输入流读取数据输出流写出数据数据类型: 字节流一个字节占8位, 以一个字节为单位读数据八大数据类型所占字节数: byte(1), ...
storm从入门到放弃(一)，storm介绍
背景:目前就职于国内最大的IT咨询公司,恰巧又是毕业季,所在部门招了100多个应届毕业生,本人要跟部门新人进行为期一个月的大数据入职培训,特此将整理的文档分享出来. 原文和作者一起讨论:http:// ...
iOS Socket 整理以及CocoaAsyncSocket、SRWebSocket源码解析（一）
写在准备动手的时候: Socket通讯在iOS中也是很常见,自己最近也一直在学习Telegram这个开源项目,Telegram就是在Socket的基础上做的即时通讯,这个相信了解这个开源项目的也都知道 ...
python函数（6）：内置函数和匿名函数
我们学了这么多关于函数的知识基本都是自己定义自己使用,那么我们之前用的一些函数并不是我们自己定义的比如说print(),len(),type()等等,它们是哪来的呢? 一.内置函数由python内部 ...
oracle 修改表空间文件路径方法
比如说修改 user01.dbf 文件的路径 1.先登录sqlplus: C:\Documents and Settings\chezh>sqlplus system/passwo ...
Python处理csv文件
Python处理csv文件 CSV(Comma-Separated Values)即逗号分隔值,可以用Excel打开查看.由于是纯文本,任何编辑器也都可打开.与Excel文件不同,CSV文件中: 值没 ...

CSS3笔记之第四天