CSS-Transform

CSS3动画-transform(rotate, scale, translate, skew, matrix)

by JSDavi

HTML

<div>
    <div class = "transform">
        <div id = "rotate">
            Title
        </div>
        
        <div id = "scale">
            SubTitle
        </div>
        <a id = "translate">
            Content
        </a>
    </div>
    <div id = "skew">
        Good job
    </div>
    <div id = "origin">
        Origin
    </div>
</div>

CSS

.transform
{
    border-width: 2px;
    border-color: #2d2d2d;
    color: red;
    background-color: lightgray;
    height: 200px;
    width: 400px;
}
#rotate
{
    -webkit-transform: rotate(-40deg); 
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
#scale
{
    background-color: green;
    color: white;
    text-align: right;
    -webkit-transform: scale(-1.1,1);
    -moz-transform: scale(1.1,1);
    -o-transform; scale(1.1,1);    
}
#translate
{
    -webkit-transform: translate(20px,30px);
    -moz-transform: translate(20px,30px);
    -o-transform: translate(20px,30px);
}
#skew
{
    -webkit-transform: skew(0deg,-20deg);
    -moz-transform: skew(10deg,30deg);
    -o-transform: skew(10deg,30deg);
}
#origin
{
    -webkit-transform-origin: 10 40;
    -moz-transform-origin: 10 40;
    -o-transform-origin: 10 40;
    
    -webkit-transform: rotate(-40deg); 
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg); 
}
#transform a:hover, #transform a:focus
{
    background-color: blue;
    -webkit-transition-property: background-color;
    -o-transition-property: background-color;
    
    -webkit-transition-duration: 4s;
    -o-transition-duration: 4s;
}