CSS3属性(二)

<html>
<head>
    <title>css2</title>
    <style type="text/css">
        div{
            width: 200px;
            height:200px;
            font-size: 65px;
        }
    /*    1.translate()      根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动 */
        .translate{
            background: red;
            transform: translate(50px,100px);
            -ms-transform: translate(50px,100px); /* IE 9 */
            -webkit-transform: translate(50px,100px); /* Safari and Chrome */
        }
        /*旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转*/
        .rotate{
            background: blue;
            -webkit-transform: rotate(45deg);
              transform: rotate(45deg);
        }
        /*skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）*/
        .skew{
            background: orange;
            -webkit-transform: skew(45deg,50deg);
              transform:skew(45deg,50deg);
        }
        /*缩放 scale()函数 让元素根据中心原点对对象进行缩放*/
        .scale{
            background: green;
            -webkit-transform: scale(1.5,0.5);
              transform: scale(1.5,0.5);
        }

        /*matrix() 所有 2D 转换方法组合在一起，用来指定一个2D变换，允许您：旋转、缩放、移动以及倾斜元素。是一个矩阵。*/
        .matrix{
            background: gray;
            -webkit-transform: matrix(1,0,0,1,100,100);
              transform: matrix(1,0,0,1,100,100);
        }

        /*transform-origin对元素进行原点位置改变*/

        /*rotateX元素围绕其 X 轴以给定的度数进行旋转*/
        .rotateX{
            background: yellow;
            transform: rotateX(120deg);
            -webkit-transform: rotateX(120deg);    /* Safari 和 Chrome */
            -moz-transform: rotateX(120deg);
        }

        /*rotateY元素围绕其 Y 轴以给定的度数进行旋转*/
        .rotateY{
            background: pink;
            transform: rotateY(130deg);
            -webkit-transform: rotateY(130deg);    /* Safari 和 Chrome */
            -moz-transform: rotateY(130deg);    
        }

        /*transition属性是一个复合属性，主要包括以下几个子属性：
            transition-property:指定过渡或动态模拟的CSS属性
            transition-duration:指定完成过渡所需的时间
            transition-timing-function:指定过渡函数
            transition-delay:指定开始出现的延迟时间
        */
        .transition{
            background: purple;
            transition: width 2s;
            -moz-transition: width 2s;    /* Firefox 4 */
            -webkit-transition: width 2s;    /* Safari 和 Chrome */
            -o-transition: width 2s;
        }
        .transition:hover{
            width:400px;
        }

        /*@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。
        animate 属性规定所有动画属性的简写属性，除了 animation-play-state 属性。
        动画的名称:animation-name;
        动画的时长:animation-duration;
        动画播放方式(速度曲线):animation-timing-function;
        动画开始播放的时间:animation-delay;
        动画播放次数:animation-iteration-count;
        动画播放方向:animation-direction;
        动画的播放状态:animation-play-state;
        动画时间外属性:animation-fill-mode;
        */
        .animation{
            animation:an1 5s;
            -moz-animation:an1 5s;    /* Firefox */
            -webkit-animation: an1 5s;    /* Safari 和 Chrome */
            -o-animation: an1 5s;
        }
        .animation2{
            animation:an2 5s;
            -moz-animation:an2 5s;    /* Firefox */
            -webkit-animation: an2 5s;    /* Safari 和 Chrome */
            -o-animation: an2 5s;
        }

        @keyframes an1{
            from{background: red;}
            to{background: yellow;}
        }
        @keyframes an2{    
            0%{background: red;}
            25%{background: yellow;}
            50%{background: blue;}
            100%{background: black;}
        }

    </style>
</head>
<body>
    <!-- 2D转换 -->
    
    <div class='translate'></div>
    <div class='rotate'></div>
    <div class='skew'></div>
    <div class='scale'></div>
    <div class='matrix'></div>


    <!-- 3D转换 -->
    <div class='rotateX'>hello word</div>
    <div class='rotateY'>hello word</div>
    

    <!-- 过渡 -->
    <div class='transition'></div>

    <!-- 动画 -->
    <div class='animation'></div>
    <div class='animation2'></div>
</body>
</body>
</html>
matrix并不明白其意思
posted @ 2015-07-20 13:43 Bigdots 阅读(247) 评论(0) 编辑收藏举报
Big_Dots

CSS3属性(二)

公告
