CSS-动画效果
最近要完成一个轮播图，需要实现图片的平滑移动
# transition 属性
表示过渡效果的时间
transition: width 2s;/* 对宽度属性应用过渡效果 */
transition: all 2s;/* 对所有属性都应用过渡效果 */
2
# position
网页主体按照层级来看最外层是html，紧接着就是body，body内展示我们想要的内容
Absolute：绝对定位，是相对于最近的且不是static定位的父元素来定位
Fixed：绝对定位，是相对于浏览器窗口来定位的，是固定的，不会跟屏幕一起滚动。
Relative：相对定位，是相对于其原本的位置来定位的。
Static：默认值，没有定位。
Inherit：继承父元素的position值
absolute定位的子元素宽度不会影响父元素的宽高，而relative定位的子元素若变宽变高会撑大父元素。
只是移动位置不会改变父元素的宽高
<body>
<div class="1" style="background-color:red;">
<div class="1-1" style="background-color:green;width:100px;height:100px;position:absolute;bottom:0px;"></div>
<h1>This is parent-div</h1>
<div class="1-2" style="background-color:blue;width:100px;height:100px;position:relative;bottom:-50px;"></div>
</div>
</body>
2
3
4
5
6
7
使用position:relative;的蓝色容器相对于红色父容器定位，且宽高撑开了父容器
使用position:absolute;的绿色容器相对于body定位，不会撑开父容器
这里用到了bottom 属性
这个就是后文要介绍的了
# position:static;
静态定位的元素不受 top、bottom、left 和 right 属性的影响。
position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位：
如果使用position: static;
再使用left: 30px;将不会改变元素位置
元素默认的position都是static
块元素独占一行，设置宽高以后，旁边的地方还是不可用，被定义为margin值，图上橙色部分就是div独占一行的没有使用的空间
# CSS3 transform
Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
# 语法
transform: none|transform-functions;
transform属性向元素应用2D或3D转换，允许对元素进行旋转、缩放、移动或倾斜。
在二维平面上水平方向移动元素
| 值 | 描述 |
|---|---|
| none | 定义不进行转换。 |
| translate(x,y) | 定义 2D 转换。 |
| translate3d(x,y,z) | 定义 3D 转换。 |
| rotate(angle) | 定义 2D 旋转，在参数中规定角度。 |
| rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
# 示例：translateX()
transform: translateX(10px);
div
{
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform: translateX(100px);
}
2
3
4
5
6
7
8
transform: rotate(8deg);
对不同浏览器的属性设定
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
2
# 示例：transform-style
transform-style: flat | preserve-3d
flat值为默认值，表示所有子元素在2D平面呈现。preserve-3d表示所有子元素在3D空间中呈现。
CSS 3D Transform Live Demo (ics-creative.github.io) (opens new window)
这个网站可以直观的看到每个属性所控制的效果
