css之变形（transform） 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3变形，阴影和渐变背景色属性</title>
</head>
<!--
变形【transform】
向元素应用2d或3d转换。该属性允许我们对元素进行旋转，缩放，移动或倾斜

transform参数：
rotate（角度值）：旋转
translate（x，y）：移动
scale（x，y）：缩放
skew（x，y）：扭曲
matrix（a,b,c,d,e,f）:矩阵

变形【transform】
改变元素基点 transform-origin:x y;
改变transform动作的基点（中心点）。


对象阴影【box-shadow】
语法：box-shadow:投影方式 x轴偏移量 y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色；
可以使用一个或多个投影，如果使用多个投影时必须用逗号，分开。
另外，还可以通过inset来设置对象的内阴影


背景颜色线性渐变【linear-gradient】
语法：
background:linear-gradient(起点，起点颜色，过度颜色【可选】，终点颜色)；
起点：top是从上到下，left是从左到右。如果定义成left top，那就是从左上角到右下角
过渡色：可以插入多个，表示多种颜色的渐变
 -->


<style>
    .transform{
        width: 1000px;
        background-color: #fdfdfd;
        margin:50px auto;
    }
    .transform:after{
        clear:both;
        content: ' ';
        display: block;
        overflow: hidden;
    }
    .transform > p{
        width: 230px;
        float: left;
        border:1px #999 solid;
        margin-right: 10px;
        text-align: center;
        padding-bottom: 10px;
    }
    .transform > p strong{
        display: block;
        background-color: #eee;
        font-size: 20px;
        line-height: 28px;
        font-family: "MicrosoftYaHei";
        color:#333;
        margin-bottom: 10px;
    }
    .transform > p  span{
        display: block;
        width: 100px;
        height: 100px;
        margin:0 auto;
        border:1px #ccc solid;
        background-color: #09f;
    }
    .transform.origin > p  span{
        background-color: #0c0;
        /* 改变基点 */
        transform-origin:0 -40px;
    }
    .transform > p .roate{
        transform:rotate(20deg);
    }
    .transform > p .translate{
        transform:translate(20px,20px);
    }
    .transform > p .scale{
        transform:scale(.5);
    }
    .transform > p .skew{
        transform:skew(20deg,-30deg);
    }
</style>
<body>
    <div class="transform">
        <p>
            <strong>旋转(roate)</strong>
            <span class="roate"></span>
        </p>

        <p>
            <strong>移动(translate)</strong>
            <span class="translate"></span>
        </p>

        <p>
            <strong>缩放(scale)</strong>
            <span class="scale"></span>
        </p>

        <p>
            <strong>扭曲（skew)</strong>
            <span class="skew"></span>
        </p>                        
    </div>

    <div class="transform origin">
        <p>
            <strong>旋转(roate)</strong>
            <span class="roate"></span>
        </p>

        <p>
            <strong>移动(translate)</strong>
            <span class="translate"></span>
        </p>

        <p>
            <strong>缩放(scale)</strong>
            <span class="scale"></span>
        </p>

        <p>
            <strong>扭曲（skew)</strong>
            <span class="skew"></span>
        </p>                        
    </div>
</body>
</html>

 

posted @ 2019-03-10 22:25  cl94  阅读(1912)  评论(0)    收藏  举报