您的位置：首页 > Web前端 > CSS

css3 学习

2015-09-28 17:27 513 查看
在 频幕 居中一个元素的的最快捷的方式：

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

}


2d 转换之旋转

transform:rotate();//默认值是0度
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;有两个功能一个是隐藏溢出的部分，另一个功能是把改元素变成布局模式，表示里已经不是空元素了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航