zoukankan      html  css  js  c++  java
  • 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;有两个功能一个是隐藏溢出的部分,另一个功能是把改元素变成布局模式,表示里已经不是空元素了。

  • 相关阅读:
    php5.5+apache2.4+mysql5.7在windows下的配置
    rsync命令详解
    JVM GC算法 CMS 详解(转)
    JVM1.6 GC详解
    hadoop2升级的那点事情(详解)
    免费SVN空间
    JAVA正则表达式:Pattern类与Matcher类详解(转)
    Eclipse插件安装方式及使用说明
    可扩展Web架构与分布式系统(转)
    关于《Selenium3自动化测试实战--基于python语言》
  • 原文地址:https://www.cnblogs.com/aytsoft/p/4844541.html
Copyright © 2011-2022 走看看