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笔记之第四天的更多相关文章

  1. Deep Learning论文笔记之（四）CNN卷积神经网络推导和实现（转）

    Deep Learning论文笔记之(四)CNN卷积神经网络推导和实现 zouxy09@qq.com http://blog.csdn.net/zouxy09          自己平时看了一些论文, ...

  2. 【Unity Shaders】学习笔记——SurfaceShader（四）用纹理改善漫反射

    [Unity Shaders]学习笔记——SurfaceShader(四)用纹理改善漫反射 转载请注明出处:http://www.cnblogs.com/-867259206/p/5603368.ht ...

  3. python学习笔记--Django入门四 管理站点--二

    接上一节  python学习笔记--Django入门四 管理站点 设置字段可选 编辑Book模块在email字段上加上blank=True,指定email字段为可选,代码如下: class Autho ...

  4. VSTO学习笔记（十四）Excel数据透视表与PowerPivot

    原文:VSTO学习笔记(十四)Excel数据透视表与PowerPivot 近期公司内部在做一种通用查询报表,方便人力资源分析.统计数据.由于之前公司系统中有一个类似的查询使用Excel数据透视表完成的 ...

  5. Python学习笔记（十四）

    Python学习笔记(十四): Json and Pickle模块 shelve模块 1. Json and Pickle模块 之前我们学习过用eval内置方法可以将一个字符串转成python对象,不 ...

  6. 深度学习课程笔记（十四）深度强化学习 --- Proximal Policy Optimization (PPO)

    深度学习课程笔记(十四)深度强化学习 ---  Proximal Policy Optimization (PPO) 2018-07-17 16:54:51  Reference: https://b ...

  7. 【Git 使用笔记】第四部分：git在公司中的开发流程

    先声明几个变量 仓管A:主分支,只有master分支仓管B:开发分支,只有各个业务开发分支   仓管B fork 于 A 如下图 为了保证 代码的稳定性,只有 仓管B中的某个分支测试完毕并进行了代码r ...

  8. python3.4学习笔记(二十四) Python pycharm window安装redis MySQL-python相关方法

    python3.4学习笔记(二十四) Python pycharm window安装redis MySQL-python相关方法window安装redis,下载Redis的压缩包https://git ...

  9. 【NPDP笔记】第四章 文化组织与团队

    此为临时链接,仅用于预览,将在短期内失效.关闭 [NPDP笔记]第四章 文化组织与团队 小康 小康哥的产品之路 9月6日 4.1 文化和氛围对创新的重要性 文化:信念,价值观,假设,与期望 氛围:直接 ...

随机推荐

  1. jenkins，SVN构建总是clean目录，回归失败

    近期发现配置的jenkins任务打包时间极长,经过定位为svn版本的问题,不同的svn版本.svn的信息存在不一致. 解决: 升级服务器svn版本. 调整jenkins系统设置: 测试通过(回滚成功) ...

  2. hashcode-equals方法

    package com.charles.collection; import java.util.HashSet; import java.util.Set; public class Point { ...

  3. VSCode自定义配色方案

    说明 本文更新于2017-07-24,使用VSCode 1.14.1,操作系统为Windows. 配置文件 "文件-首选项-颜色主题"即可显示所有可用的颜色主题,上下选择后Ente ...

  4. Quartz.Net 与 Autofac 自动注入 的整合问题

    一.问题发现 今天早上在用 Quartz.Net 做定时扫描异常队列的功能模块时,发现处理异常队列的Job里面的ILog对象服务,Autofac没有自动注入进来. 然后在网上查阅相关资料,无奈发现 Q ...

  5. （转）硬盘分区备忘（主分区，扩展分区和逻辑分区）以及Linux硬盘分区工具parted 介绍

    场景:最近在学习Linux的基础知识,不可避免的设计到Linux的磁盘分区,以前做过总结,但是那种总结就是复制别人的文章,总结完就不想看第二遍,所以很容易就遗忘了!清楚明白的理解分区后,我就可以在自己 ...

  6. （转）java并发之Executor

    场景: 线程池在面试时候经常会碰到,在工作中用的场景更多,所以很有必要弄清楚. 1 简介 Java自1.5以来加入了处理一批线程的方法,也就是java并发包里的Executor.本文主要介绍Execu ...

  7. jquery 禁止herf跳转，并执行相应的js代码

    <a class="oh_btn bg_3" href="javascript:void(0);" onclick="myfun(this)&q ...

  8. 【SignalR学习系列】7. SignalR Hubs Api 详解（JavaScript 客户端）

    SignalR 的 generated proxy 服务端 public class ContosoChatHub : Hub { public void NewContosoChatMessage( ...

  9. strtok函数 分类： c++ 2014-11-02 15:24 214人阅读 评论(0) 收藏

    strtok函数是cstring文件中的函数 strtok函数是cstring文件中的函数 其功能是截断字符串 原型为:char *strtok(char s[],const char *delin) ...

  10. RequireJs加载Codemirror，配合AngularJS的坑

    requireJS加载codemirror,并且配合angularJs一起使用的时候,高亮显示代码编辑器.要注意以下几点: 1:普通Js加载CodeMirror  代码如下: <!DOCTYPE ...