3d Transforms (Smashing Mag)

by stopsatgreen

HTML

<div class="wrapper">
<h2>Example 1</h2>
<div class="example" id="example1">
    <div class="rotateX"><img src="http://placekitten.com/75/75" height="75" width="75"></div>
    <div class="rotateY"><img src="http://placekitten.com/75/75" height="75" width="75"></div>
    <div class="rotateZ"><img src="http://placekitten.com/75/75" height="75" width="75"></div>
</div>
<h2>Example 2</h2>
<div class="example" id="example2">
    <div class="translateX"><img src="http://placekitten.com/75/75" height="75" width="75"></div>
    <div class="translateY"><img src="http://placekitten.com/75/75" height="75" width="75"></div>
    <div class="translateZ"><img src="http://placekitten.com/75/75" height="75" width="75"></div>
</div>
<h2>Example 3</h2>
<div class="example" id="example3">
    <div class="perspective50"><img src="http://placekitten.com/75/75" height="75" width="75"></div>
    <div class="perspective100"><img src="http://placekitten.com/75/75" height="75" width="75"></div>
    <div class="perspective200"><img src="http://placekitten.com/75/75" height="75" width="75"></div>
</div>
<h2>Example 4</h2>
<div class="example example4" id="example4">
    <div class="flat"><img src="http://placekitten.com/75/75" height="75" width="75"></div>
    <div class="preserve-3d"><img src="http://placekitten.com/75/75" height="75" width="75"></div>
</div>
<h2>Example 5</h2>
<div class="example example5" id="example5">
    <div class="center-center"><img src="http://placekitten.com/75/75" height="75" width="75"></div>
    <div class="right-top"><img src="http://placekitten.com/75/75" height="75" width="75"></div>
</div>
</div>

CSS

/* Example 1 */

.rotateX img { -webkit-transform: rotateX(45deg); }

.rotateY img { -webkit-transform: rotateY(45deg); }

.rotateZ img { -webkit-transform: rotateZ(45deg); }

/* Example 2 */

.translateX img { -webkit-transform: translateX(-20px); }

.translateY img { -webkit-transform: translateY(-20px); }

.translateZ img { -webkit-transform: translateZ(-20px); }

/* Example 3 */

#example3 div {
    -webkit-perspective: none;
    -webkit-transform: rotateX(15deg) rotateY(45deg);
}

.perspective50 img { -webkit-transform: rotateX(-90deg) rotateY(-15deg) rotateZ(0deg) perspective(50) translateZ(10px); }

.perspective100 img { -webkit-transform: rotateX(-90deg) rotateY(-15deg) rotateZ(0deg) perspective(100) translateZ(10px); }

.perspective200 img { -webkit-transform: rotateX(-90deg) rotateY(-15deg) rotateZ(0deg) perspective(200) translateZ(10px); }

/* Example 4 */

#example4 { width: 170px; }

#example4 div { -webkit-transform: rotateX(15deg) rotateY(45deg); }

.example4 img { -webkit-transform: translateZ(20px); }

.example4 .flat { -webkit-transform-style: flat; }

/* Example 5 */

#example5 { width: 170px; }

.example5 img { -webkit-transform: rotateX(45deg) rotateY(45deg); }

.example5 .right-top img { -webkit-transform-origin: right top; }

/* Setup */

.wrapper {
    margin: 0 auto;
    width: 300px;
}

.example {
    margin: 20px auto;
    padding: 20px 0;
    width: 265px;
}

.example:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.example div {
    background-color: rgba(255,0,0,0.2);
    float: left;
    height: 75px;
    margin-right: 20px;
    -webkit-perspective: 200;
    -webkit-transform-style: preserve-3d;
    width: 75px;
}

.example div:last-child { margin-right: 0; }

.example img {
    pointer-events: none;
    -webkit-transition: all 0.5s ease-in-out;
}

.example div:hover img { -webkit-transform: none; }