css3记录

网站：http://www.htmleaf.com/css3/css3donghua/

1.fontawesome 图标字体库

@font-face {
    font-family: 'FontAwesome';
    src: url('../fonts/fontawesome-webfont.eot?v=4.5.0');
    src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal
}

2. backface-visibility 属性

backface-visibility 属性定义当元素不面向屏幕时是否可见。

如果在旋转元素不希望看到其背面时，该属性很有用。

隐藏被旋转的 div 元素的背面：

div
{
backface-visibility:hidden;
-webkit-backface-visibility:hidden;	/* Chrome 和 Safari */
-moz-backface-visibility:hidden; 	/* Firefox */
-ms-backface-visibility:hidden; 	/* Internet Explorer */
}

3.text-transform: uppercase; 英文字母大写

4.translate:(0,20px);  translate3d(0,20px,0);

5.设置div背景颜色，再设置div里面的图片透明度，然后背景颜色和图片相结合看起来挺好看的，可用于背景hover样式。

6.设置z-index:-1;后设置perspective可以透视。

perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。

当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

7.transition-delay:.2s; animation-delay:.2s;延迟动画