css3相关笔记（三）

1.每一个方向上的边框形状并不是矩形的，其实是三角形或梯形的，配合圆角边框可以制作美丽花瓣。


2.css3 3d变换效果 transform
◆transform:rotateX(360deg);表示在x轴3D旋转360度。
◆transform:rotateY(360deg);表示在y轴3D旋转360度。
◆transform:rotateZ(360deg);表示在z轴3D旋转360度。
◆transform:translateX(300px);表示在x轴3D位移300px。
◆transform:translateY(300px);表示在y轴3D位移300px。
◆transform:translateZ(300px);表示在z轴3D位移300px。
★3D效果一般配合透视效果来使用更加明显，一般是给父容器添加透视。




2.css3 透视效果 （调整焦距）
◆perspective:1000px;值越大焦距越远，值越小焦距越近，值越小效果越明显，就会感觉和你的距离更加的近，透视效果仅仅只是视觉上的呈现。


3.css3 反面可见性 
◆backface-visibility:hidden;表示背面可见性为隐藏，一般配合3D翻转来使用，一个盒子只有正面可见，一翻转到背面之后就不可见了。


4.伪元素中的content属性可以赋值为标签的自定义属性【
//设置伪元素
span::before {
content:attr(data-text);
}
//页面标签
<span data-text="我是自定义属性"></span>
】。


5.css3 真正的3d效果 transform-style:preserve-3d;当这个属性加给父盒子时，可以让子盒子呈现3d效果，这个属性默认值为flat，子盒子呈现2d效果（扁平化）。


6.css3 动画 animation
◆js中的animate函数调用，是先定义一个animate函数然后再调用animate();
◆css3中的动画，也是先定义然后再调用。
◆css3定义动画:【
@keyframes 动画名{
from{
初始状态
}
to{
结束状态
}
}
】
◆css3执行动画：【
animation: 动画名  一次动画持续时间  执行次数（infinite:无限次）  是否反向（alternate）  运动曲线（linear） 延迟时间;
】
◆css3动画定义与执行【
/*定义一个移动的动画*/
@keyframes move {
from{
transform:translateX(0px);
}
to{
transform:translateY(500px);
}
}
/*使用定义的移动的动画*/
animation:move 2s 3;
】
◆定义多组动画【
@keyframes move{
0%{
transform:translateX(0px) translateY(0px);
}
25%{
transform:translateX(500px) translateY(0px);
}
50%{
transform:translateX(500px) translateY(300px);
}
75%{
transform:translateX(0px) translateY(300px);
}
100%{
transform:translateX(0px) translateY(0px);
}
}
】
★animation属性详解【
/*动画名称  必写*/
animation-name:move;
/*动画一次所持续的时间  必写*/
animation-duration:2s;
/*动画执行的次数（动画重复的次数） 无数次:infinite;*/
animation-iteration-cont:3;
/*动画的方向：normal 全正向，alternate 先正向再反向*/
animation-direction:alternate;
/*动画每次执行时延迟的时间*/
animation-delay:1s;
/*动画结束后保持的状态  backwards(默认值)表示回退到原点  forwards表示不回到原点，backwards表示动画结束后 保持 动画开始前的状态，forwards表示动画结束后 保持 动画结束后状态*/
animation-fill-mode:backwards;
/*动画的类型 也就是动画的运动曲线  linear 表示线性匀速   ease-in 表示慢慢变快  ease-in-out 表示先快后慢   steps(3) 表示每一次动画都是分三步完成(速度就像是一帧一帧的完成的)，steps这个属性可以用来做时钟，也能够用来做那些 很准确的一帧一帧完成的动画，因为steps的每一帧都是瞬间完成的*/
animation-timing-fuction:linear;
/*动画的播放状态  使用这个属性能够改变动画的播放状态，如动画正在播放时，可以通过这个属性，让动画暂停一下*/
animation-play-state:paused;
】
◆animation:time 60s steps(60);这表示一根秒钟一分钟转60次。


7.css3 多列布局 column ，可能兼容性问题，需要添加私有前缀 -webkit-、-moz-、-ms-、-o- 
◆column-count:3;表示分三列
◆column-rule:1px dashed red;表示列与列之间的分割线。
◆column-gap:30px;表示列与列之间的间距。
◆column-width:300px;表示设置每列的宽度，但是如果默认的宽度大于你设置的宽度，则不会起任何效果，前面三条会影响默认宽度的大小，可以说默认的宽度就是由前面三项属性count、rule、gap产生的。
★column-span:all;表示跨列，一般配合text-algin:center让标题居中。