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

随机推荐

打造高性能，轻量级的 webform框架---js直接调后台（第二天）
问题2: 每次与后台打交道都需要写一些自己都看不太懂的事件,而且传参数很麻烦,这就是.net 封装的事件,如何解决呢? 首先以为webfrom事件,都需要写服务器控件来绑定后台的事件 ...
nopCommerce 3.9 大波浪系列之开发支持多店的插件
一.基础介绍 nop支持多店及多语言,本篇结合NivoSlider插件介绍下如何开发支持多商城的小部件. 主要接口如下: ISettingService 接口:设置接口,可实现多店配置. (点击接口介 ...
【bzoj2819】Nim
Description 著名游戏设计师vfleaking,最近迷上了Nim.普通的Nim游戏为:两个人进行游戏,N堆石子,每回合可以取其中某一堆的任意多个,可以取完,但不可以不取.谁不能取谁输.这个游 ...
如何将R包安装到自定义路径
参考设置环境变量R_LIBS将R包安装到自定义路径实际上是可以解决问题的, #环境变量完成以后,启动(重启)R,运行 .libPaths() 加载R包时,发现路径仍然未变成自定义的. 那么参 ...
hdu 6045 Is Derek lying?（思维推导）
Problem Description Derek and Alfia are good friends.Derek is Chinese,and Alfia is Austrian.This sum ...
centos7源码编译安装Ansible详细部署
一.基础介绍==========================================================================================ansi ...
TFS build server搭建，搭建自动化构建服务器
TFS build 服务器的搭建主要步骤如下: 一:环境准备: 新建一台build服务器安装Visual Studio.主要目的是: a. 生成Build脚本所需要的build命令:b.与TFS组合 ...
noip冲刺赛第五次考试
1.公约数 (gcd.cpp\c\pas) [问题描述] 给定一个正整数,在[1,n]的范围内,求出有多少个无序数对(a,b)满足 gcd(a,b)=a xor b. [输入格式] 输入共一行,一个正 ...
opencv 访问图像像素的三种方式
访问图像中的像素访问图像像素有三种可行的方法方法一:指针访问指针访问访问的速度最快,Mat类可以通过ptr函数得到图像任意一行的首地址,同时,Mat类的一些属性也可以用到公有属性 rows和cols ...
ThinkPHP搭建商城一，环境部署
一:配置虚拟主机我使用的是Mac笔记本,所以以mac为例 1,首先找到Apache虚拟主机配置目录etc/apache2/extra/httpd-vhosts.conf或者private/etc/a ...

CSS3笔记之第四天