【css】transform的使用

<h1>Css3 Transform</h1>
<!-- Rotate-->
<div class="card">
    <div class="box rotate">
        <div class="fill"></div>
    </div>
    <p>rotate(45deg)  </p>
</div>
<div class="card">
    <div class="box rotateX">
        <div class="fill"></div>
    </div>
    <p>rotateX(45deg)</p>
</div>
<div class="card">
    <div class="box rotateY">
        <div class="fill"></div>
    </div>
    <p>rotateY(45deg)</p>
</div>
<div class="card">
    <div class="box rotateZ">
        <div class="fill"></div>
    </div>
    <p>rotateZ(45deg)  </p>
</div>
<!-- scale-->
<div class="card">
    <div class="box scale">
        <div class="fill"></div>
    </div>
    <p>scale(2)</p>
</div>
<div class="card">
    <div class="box scaleX">
        <div class="fill"></div>
    </div>
    <p>scaleX(2)    </p>
</div>
<div class="card">
    <div class="box scaleY">
        <div class="fill"></div>
    </div>
    <p>scaleY(2)    </p>
</div>
<!-- skew-->
<div class="card">
    <div class="box skew">
        <div class="fill"></div>
    </div>
    <p>skew(45deg, 45deg)  </p>
</div>
<div class="card">
    <div class="box skewX">
        <div class="fill"></div>
    </div>
    <p>skewX(45deg)</p>
</div>
<div class="card">
    <div class="box skewY">
        <div class="fill"></div>
    </div>
    <p>skewY(45deg)</p>
</div>
<!-- translate-->
<div class="card">
    <div class="box translate">
        <div class="fill"></div>
    </div>
    <p>translate(45px)  </p>
</div>
<div class="card">
    <div class="box translateX">
        <div class="fill"></div>
    </div>
    <p>translateX(45px)</p>
</div>
<div class="card">
    <div class="box translateY">
        <div class="fill"></div>
    </div>
    <p>translateY(45px)</p>
</div>
<div class="card">
    <div class="box matrix">
        <div class="fill"></div>
    </div>
    <p> matrix(2, 2, 0, 2, 45, 0)</p>
</div>
<h4>Perspective : 100</h4>
<div class="perspective-100">
    <div class="card">
        <div class="box rotateX">
            <div class="fill"></div>
        </div>
        <p>rotateX(90deg)</p>
    </div>
    <div class="card">
        <div class="box rotateY">
            <div class="fill"></div>
        </div>
        <p>rotateY(45deg)</p>
    </div>
</div>
<h4>Perspective : 200</h4>
<div class="perspective-200">
    <div class="card">
        <div class="box rotateX">
            <div class="fill"></div>
        </div>
        <p>rotateX(90deg)</p>
    </div>
    <div class="card">
        <div class="box rotateY">
            <div class="fill"></div>
        </div>
        <p>rotateY(45deg)</p>
    </div>
</div>
<!-- transform origin-->
<h2>Transform origin</h2>
<div class="card">
    <div class="box rotate">
        <div class="fill to-100-0-0"></div>
    </div>
    <p>transform-origin : 100% 0 0  <br/>rotate(45deg)</p>
</div>
<div class="card">
    <div class="box rotate">
        <div class="fill to-0-100-0"></div>
    </div>
    <p>transform-origin : 0 100%  0<br/>rotate(45deg)</p>
</div>
<div class="card perspective-200">
    <div class="box rotateX">
        <div class="fill to-0-100-0"></div>
    </div>
    <p>transform-origin : 0 100%  0<br/>rotateX(45deg)</p>
</div>
<div class="card perspective-200">
    <div class="box rotateX">
        <div class="fill to-100-0-0"></div>
    </div>
    <p>transform-origin : 0 100%  0<br/>rotateX(45deg)</p>
</div>
<div class="card perspective-200">
    <div class="box rotateY">
        <div class="fill to-0-100-0"></div>
    </div>
    <p>transform-origin : 0 100%  0 <br/>rotateY(45deg)</p>
</div>
<div class="card perspective-200">
    <div class="box rotateY">
        <div class="fill to-100-0-0"></div>
    </div>
    <p>transform-origin : 100%  0 0<br/>rotateY(45deg)</p>
</div>
<div class="card">
    <div class="box scale">
        <div class="fill to-100-0-0"></div>
    </div>
    <p>transform-origin : 100%  0 0<br/>scale(2)</p>
</div>
<div class="card">
    <div class="box scale">
        <div class="fill to-0-100-0"></div>
    </div>
    <p>transform-origin : 0 100%  0<br/>scale(2)</p>
</div>
<div class="card">
    <div class="box scaleX">
        <div class="fill to-100-0-0"></div>
    </div>
    <p>transform-origin : 100%  0 0<br/>scaleX(2)</p>
</div>
<div class="card">
    <div class="box scaleX">
        <div class="fill to-0-100-0"></div>
    </div>
    <p>transform-origin : 0 100%  0<br/>scaleX(2)</p>
</div>
<div class="card">
    <div class="box scaleY">
        <div class="fill to-100-0-0"></div>
    </div>
    <p>transform-origin : 100%  0 0<br/>scaleY(2)</p>
</div>
<div class="card">
    <div class="box scaleY">
        <div class="fill to-0-100-0"></div>
    </div>
    <p>transform-origin : 0 100%  0<br/>scaleY(2)</p>
</div>

• css部分