1、目前看的都是CSS3特性相关知识。
对长单词拆分并切换到下一行
p {word-wrap:break-word;}
2、
| skew | 英[skju:] | 美[skju] |
| adj. |
| vt. |
| vi. |
3、
div
{
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari 和 Chrome */
-o-transform: scale(2,4); /* Opera */
-moz-transform: scale(2,4); /* Firefox */
}
{
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari 和 Chrome */
-o-transform: scale(2,4); /* Opera */
-moz-transform: scale(2,4); /* Firefox */
}
值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。
注意观察常用的这几个浏览器适配的前缀
4、CSS3中的矩阵 讲的不错的文章：
http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/comment-page-2/
transform: matrix(a,b,c,d,e,f);
六个参数对应的矩阵是
所以矩阵公式：
x' = ax+cy+e;
y' = bx+dy+f;
矩阵的偏移：只与最后两个参数e， f有关
矩阵的缩放： matrix(sx, 0, 0, sy, 0, 0);
，等同于
scale(sx, sy)
;
矩阵的旋转 ：
matrix(cosθ,sinθ,-sinθ,cosθ,0,0) 记忆：CS-SC对称结构
拉伸：
matrix(1,tan(θy),tan(θx),1,0,0)
θy表示Y轴倾斜的角度，
θx表示x轴倾斜的角度
对于一般的交互，
transform属性默认提供的些方法足够了，但是，一些其他的效果，如果transform属性没有提供接口方法，比方说，“镜像对称效果”(可以自己画图，根据矩阵公式算出以K为参数的a b c d)，这时，就只能靠matrix矩阵了。matrix矩阵是transform变换的基础，可以应付很多高端的效果。
5、CSS3过渡效果很炫哎！
向多个样式添加过渡效果
<head>
<style>
div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}
div:hover
{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}
</style>
</head>
<body>
6、过渡简写函数的形式
div
{
transition: width 1s linear 2s;
/* Firefox 4 */
-moz-transition:width 1s linear 2s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 2s;
/* Opera */
-o-transition:width 1s linear 2s;
{
transition: width 1s linear 2s;
/* Firefox 4 */
-moz-transition:width 1s linear 2s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 2s;
/* Opera */
-o-transition:width 1s linear 2s;
}
含义分别是：应用过渡属性的属性名，过渡用时，
过渡效果的时间曲线(如匀速/ 或者以慢速开始，变快，再以慢速结束等过渡效果)，过渡何时开始
7、CSS3动画
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
8、关于不同浏览器需要的前缀
Firefox是 -moz-
Safari 和Chrome 是 -webkit-
Opera是 -o-
9、
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
参数含义分别是：动画名称，完成一个周期花费时间，动画速度曲线，何时开始，播放次数，是否在下一周期逆向播放，是否正在运行或者暂停
310
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
