2D和3D的转换
2D转换
transform 向元素应用 2D 或 3D 转换。
步骤：
1.设置div块的样式
2.设置div块的运动角度（deg）
3.每个浏览器特殊的前缀名要加上
例：
div
{
width:100px;
height:75px;
border:1px solid black;
transform:skew(30deg,20deg);
-ms-transform:skew(30deg,20deg); /* IE 9 */
-moz-transform:skew(30deg,20deg); /* Firefox */
-webkit-transform:skew(30deg,20deg); /* Safari and Chrome */
-o-transform:skew(30deg,20deg); /* Opera */
}
</style>
</head>
<body>
<div></div>
3D转换
transform 向元素应用 2D 或 3D 转换。
transform-origin 允许你改变被转换元素的位置。
transform-style 规定被嵌套元素如何在 3D 空间中显示。
perspective 规定 3D 元素的透视效果。
perspective-origin 规定 3D 元素的底部位置。
backface-visibility 定义元素在不面对屏幕时是否可见。
例：
div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari 和 Chrome */
-moz-transform: rotateX(120deg); /* Firefox */
}
同上改变y轴也是一样，rotateX（）改为rotateY（）
CSS3动画
@keyframes 规定动画。
animation 所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function 规定动画的速度曲线。默认是 "ease"。
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。
animation-fill-mode 规定对象动画时间之外的状态。
例：
<style>
div {
width: 100px;
height: 100px;
background: yellow;
position: relative;
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
border-radius: 25px;
box-shadow: 20px 15px 5px blue;
-webkit-box-shadow: 20px 15px 5px blue;
-webkit-border-radius: 25px;
/* Safari and Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}
@keyframes myfirst {
0%{background: yellow; left:0px;top: 0px;}
25%{background: red;left: 380px;top:0px;}
50%{background: blue;left:150px;top:250px;}
75%{background: darkmagenta;left: 0px;top:250px;}
100%{background: black;left: 0px;top:0px;}
}
@-webkit-keyframes myfirst {
0%{background: yellow; left:0px;top: 0px;}
25%{background: red;left: 380px;top:0px;}
50%{background: blue;left:150px;top:250px;}
75%{background: darkmagenta;left: 0px;top:250px;}
100%{background: black;left: 0px;top:0px;}
}
</style>
垂直对齐方式、设置图片文本透明度和制作导航
display
display 属性规定元素应该生成的框的类型。
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。
例：
使段落生出行内框：
p.inline
{
display:inline;
}
vertical-align
vertical-align 属性设置元素的垂直对齐方式。
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
例：
垂直对齐一幅图像
img
{
vertical-align:text-top;
}
制作导航实例：
<style type="text/css">
div{
display:none;
}
li:hover div{
display: block;
}
</style>
</head>
<body>
<ul>
<li>额外企鹅完全
<div>
<dl>
<dd>未经人脸</dd>
</dl>
</div>
</li>
</ul>
opacity
opacity 属性设置元素的不透明级别。
value 规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。
inherit 应该从父元素继承 opacity 属性的值。
例：
img
{
opacity:0.4;
filter:alpha(opacity=40);
}
重要！：
BFC和IFC环境
BFC
BFC就是块级格式化上下文
BFC是一个独立的渲染区域，经常使用“overflow：hidden；”
来触发BFC的环境因为BFC必须要经过触发才能实现独立的运行环境；
就比如一个房间和一个走廊，房间里面不管发生什么事情
都不关走廊的事；反之，走廊发生任何事情也与房间无关。
实例：
<style type="text/css">
.da{
background: black;
width: 300px ;
height: 300px;
/*padding-top:10px;*/
overflow:hidden;
}
.xiao{
background: red;
width: 50px;
height: 50px;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="da">
<div class="xiao"></div>
</div>
**BFC注意事项**
BFC环境必须经过触发才能实现
含义：块级格式化上下文
经常使用“overflow：hidden；”触发BFC环境
IFC
行内格式化上下文
在IFC中，框（boxes）?个接?个地?平排列，起点是包含块的顶部。?平?向上的margin， border和padding在框之间得到
保留。框在垂直?向上可以以不同的?式对?：它们的顶部或底部对?，或根据其中?字的基线对?。包含那些框的??形区域，
会形成??，叫做?框(line box)。
?个?框的宽度由包含它的元素的宽度和包含它的元素??有没有float元素来决定，?度的确定由??度计算规则决定。
?框的?度?以包含他的内部容器，也可能?它包含的容器们都?（?如在基线对?的时候），当他包含的内部容器的?度?于?
框的?度时，内部容器的垂直位置由??的vertical（默认值是baseline）这个属性来确定。（这个性质可以?来实现垂直居中）
当IFC设置了高宽时，vatical——align：midden必须和line-height一起配合使用才能实现IFC环境
实例：
当设置高宽时：
<style type="text/css">
div{
width: 600px;
height: 700px;
border: 1px solid;
}
img{
vertical-align: middle;
border: 1px solid;
}
span{
line-height: 700px;
vertical-align: middle;
border: 1px solid;
}
</style>
</head>
<body>
<div>
<img src="sprites2.png" />
<span>居中</span>
</div>
**注意**
行高必须和设置的div框高度相同才能实现图片居中
**当不设置高宽时**
例：
<style type="text/css">
span{
border: 1px solid #ff0000;
}
div{
border: 1px solid #000000;
}
img{
vertical-align: middle;
border: 1px solid #ff0000;
}
</style>
</head>
<body>
<div>
<img src="sprites2.png" />
<span>我要垂直居中</span>
</div>
因为最外围的div框时被内容撑大的所以只需要输入“vertical-align: middle;”（垂直居中）就可以了
注意书写网页时必须格式规范，大的div框必须要把所有小的div框框好，每个div框之间必须要有逻辑性 不能影响布局
所有的行类元素和块级元素都要运用好不能出现混乱，浮动后可以清楚浮动不影响下一行或块的浮动 适当使用BFC和IFC环境 每个元素标签运用得当，熟记每个元素标签的意思，尽量习惯使用css文本书写代码一面造成不必要的麻烦；书写网页时应该把整个网页分为三个或数个部分语义化标签（header、center、footer）这样会使编写代码是更清楚明了，修复bug时也更容易。