CSS3

by goropoo

HTML

<div id="radius">Radius Border</div>
<div id="radius_img">Radius Image</div>


<div id="rotation">reetetetete</div>

<div id="resizing">ssssssssss</div>

<div id="transition">fasfsafsdafsd</div>

CSS

#radius {
    background: #69c;
    border: solid 1px #036;
    padding: 10px 30px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}

#radius_img {
    width:100px;
    background:url("../img/button.png") no-repeat;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    text-align:center;
    padding:8px 0;
}

#rotation {
    width:130px;
    height:100px;
    background:#ccc;
    -webkit-transform: rotate(-100deg);
    -moz-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-10deg);
}



#resizing {
    width: 130px;
    height: 50px;
    border:solid 1px #ff3333;
    background:#FFFFFF;
    overflow: hidden;
    -moz-resize: both; /* for Firefox 4+ */
    resize: both; /* can be "none", "horizontal", "vertical" or "both" */
}

#transition {
    width:130px;
    height:100px;
    background:#000000;
    -webkit-transition: 
        -webkit-transform 1s ease-in-out,
        background-color linear 1s,
        color linear 1s;
    -moz-transition:
        -moz-transform 1s ease-in-out,
        background-color linear 1s,
        color linear 1s;
    -o-transition:
        -o-transform 1s ease-in-out,
        background-color linear 1s,
        color linear 1s;
    transition:
        transform 1s ease-in-out,
        background-color linear 1s,
        color linear 1s;
}

#transition:hover {
    -webkit-transform: rotateZ(-20deg);
    -moz-transform: rotateZ(-20deg);
    -o-transform: rotateZ(-20deg);
    background-color: #ffffff;
    cursor: pointer;
}