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. @Component @Controller @Service @Repository@Resourse

    @Component @Controller @Service @Repository@Resourse这些全部是Spring提供的注解. 其中@Component用来表示把一个类纳入spring容器 ...

  2. Multimodal —— 看图说话（Image Caption）任务的论文笔记（二）引入attention机制

    在上一篇博客中介绍的论文"Show and tell"所提出的NIC模型采用的是最"简单"的encoder-decoder框架,模型上没有什么新花样,使用CNN ...

  3. HDOJ2002-计算球体面积

    Problem Description 根据输入的半径值,计算球的体积.   Input 输入数据有多组,每组占一行,每行包括一个实数,表示球的半径.   Output 输出对应的球的体积,对于每组输 ...

  4. [Tyvj 1728] 普通平衡树

    大名鼎鼎的板子题w 照例先贴题面 Describtion 您需要写一种数据结构(可参考题目标题),来维护一些数,其中需要提供以下操作:1. 插入x数2. 删除x数(若有多个相同的数,因只删除一个)3. ...

  5. YII2 添加全局自定义函数

    方法一: 这种方法就是直接在入口文件web/index.php里面写函数,示例代码如下: 全局函数 function pr($var){ //do something } (new yii\web\A ...

  6. jvm系列 (二) ---垃圾收集器与内存分配策略

    垃圾收集器与内存分配策略 前言:本文基于<深入java虚拟机>再加上个人的理解以及其他相关资料,对内容进行整理浓缩总结.本文中的图来自网络,感谢图的作者.如果有不正确的地方,欢迎指出. 目 ...

  7. 勤快的love枫[ZJOI2007]

    题目描述 小绝恋love 枫是一个出纳,经常需要做一些统计报表的工作.今天是绝恋love 枫的生日,小绝恋love 枫希望可以帮爸爸分担一些工作,作为他的生日礼物之一.经过仔细观察,小绝恋love 枫 ...

  8. 木棍分割[HAOI2008]

    题目描述 有n根木棍, 第i根木棍的长度为Li,n根木棍依次连结了一起, 总共有n-1个连接处. 现在允许你最多砍断m个连接处, 砍完后n根木棍被分成了很多段,要求满足总长度最大的一段长度最小, 并且 ...

  9. SQL Server数据库基础笔记

    启动和停止SQL Server服务三种形式 后台启动服务 计算机->右键->管理->服务和应用程序->服务->sql server(MSSQLSERVER) SQL Se ...

  10. Luogu P2690 接苹果

    题目背景 USACO 题目描述 很少有人知道奶牛爱吃苹果.农夫约翰的农场上有两棵苹果树(编号为1和2), 每一棵树上都长满了苹果.奶牛贝茜无法摘下树上的苹果,所以她只能等待苹果 从树上落下.但是,由于 ...