CSS3 transform.html

html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>title>
    <style type="text/css">
        body, div {
            margin:0;
            padding:0;
        }
        div {
            width: 100px;
            height: 100px;
            background-color: burlywood;
            margin-left: 50px;
            border: 1px solid red;
            display: inline-block;/*不换行,但是可以设置width跟height*/
        }
        /*
            translate(tx, ty)
            该函数设置html组件横向移动tx距离,纵向移动ty距离。如果ty省略那么,默认是0。
            translate(tx) -> translateX(tx)
            translate(ty) -> translateY(ty)
        */
        .translate-original {}
        .translate-now {
            -webkit-transform: translate(10px, 10px);
        }
        /*
            rotate(angle)单位是deg
            该函数设置html组件顺时针旋转angle角度
        */
        .rotate-now {
            -webkit-transform: rotate(30deg);
        }
        /*
            scale(sx, sy);
            该函数设置设置HTML组件上横向缩放比为sx,纵向缩放比为sy,如果只写一个参数,sy省略,默认是1。
            另外如果你写scale(sx) 也可写作 scaleX(sx)
            scale(sy) 也可写作scaleY(sy)
        */
        .scale-now {
            -webkit-transform: scale(1.5, 0.5);
        }
        .scale-now2 {
            -webkit-transform: scale(0.5, 1.5);
        }
        /*
            skew(sx, sy)
            该函数设置html组件沿着x轴倾斜sx角度,沿着y轴倾斜sy角度
            skewX(sx) skewY(sy)
        */
        .skew-now {
            -webkit-transform: skew(45deg, 0deg);
        }
        .skew-now2 {
            -webkit-transform: skewY(45deg);
        }
        /*复合*/
        .component {
            -webkit-transform: skewY(45deg) scale(1.5, 0.5);
        }
        /*指定中心点*/
        .center {
            -webkit-transform: skewY(45deg);
            -webkit-transform-origin: left top;
        }
    style>
head>
<body>
    <div>文字div>
    没有变动
    <div>文字div>
    <hr/>
    <div>文字div>
    移动10px 10px
    <div class="translate-now">文字div>
    <hr/>
    <div>文字div>
    旋转30度
    <div class="rotate-now">文字div>
    <hr/>
    <div>文字div>
    缩放1.5, 0.5
    <div class="scale-now">文字div>
    <hr/>
    <div>文字div>
    缩放0.5, 1.5
    <div class="scale-now2">文字div>
    <hr/>
    <div>文字div>
    x轴倾斜45度
    <div class="skew-now">文字div>
    <hr/>
    <div>文字div>
    y轴倾斜45度
    <div class="skew-now2">文字div>
    <hr/>
    <div>文字div>
    y轴倾斜45度 并且缩放1.5,0.5
    <div class="component">文字div>
    <hr style="margin-top: 50px"/>
    <div>文字div>
    y轴倾斜45度 中心为left top
    <div class="center">文字div>
body>
html>

你可能感兴趣的:(CSS3 transform.html)