css3 学习

在频幕居中一个元素的的最快捷的方式：

div{
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            
        }

2d 转换之旋转

1 transform:rotate();//默认值是0度
2 transform:rotate(45deg);//转45度

旋转的中心点：

    transform-origin:top left;/*默认中心点是 左上角  ， 可以改变中心点      transform-origin:top right;右上角  */

2d转换的缩放：

           transform:scale( X轴的缩放值,Y轴的缩放值);
           transform:scale( 0.5);/*X, Y轴的缩放值都是原来的0.5倍*/
           transform:scale( 2.5,0.5);/*X轴的缩放值是原来的2.5倍，Y轴的缩放值是原来的0.5倍*/
           transform:scaleX();/*X轴的缩放值*/
           transform:scaleY();/*Y 轴的缩放值*/

2d转换的斜切：

            transform:skew(X轴方向的斜切,Y轴方向的斜切);/**/
            transform:skew(20deg,10deg);/*X方向斜切20度，Y方向斜切10度*/
            transform:skewX();/*x 方向的斜切*/
            transform:skewY();/*Y 方向的斜切*/

最常用的css3 2D转换功能就这些。

transition-timing-function属性的图标：

注意事项：

margin 有穿到的现象，父级元素是空的话，给里面的元素margin-top:10px;那父级元素的子元素一起有margin-top:10px;的变化，为了防止现象就父级元素添加overflow:hidden;就可以了，一般overflow:hidden;有两个功能一个是隐藏溢出的部分，另一个功能是把改元素变成布局模式，表示里已经不是空元素了。