JSFiddle - React, Tailwind, and code Playground

by nokey

HTML

<div class="stage three-d">
    stage
    <div class="three-d-box preserve3d">
        3D-Box
        <div class="front transition">
            Front
            <!--每一个变换元素都是基于它父元素的坐标系-->
            <div class="child">Child</div>
        </div>
        <div class="back transition">
            Back
        </div>
    </div>
</div>
<div class="image-wrap">
    <img src="http://blog-nokey.qiniudn.com/3d-coor-1.png" alt="3D-Coordinate" />
</div>

CSS

.stage{
    margin: 30px auto;
    width: 140px;
    height: 100px;
    background-color: #956129;
}
.transition{
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
.three-d{
    color: #fff;
    text-align: center;
    font-size: 14px;
    -webkit-perspective: 200px;
    -moz-perspective: 200px;
    -ms-perspective: 200px;
    perspective: 200px;
}
.preserve3d{
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.three-d-box{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    line-height: 100px;
    text-align: center;
    color: #fff;
    background-color: rgba(50,50,50,.6);
    -webkit-transform: translatez(-50px);
    -moz-transform: translatez(-50px);
    -ms-transform: translatez(-50px);
    -o-transform: translatez(-50px);
    transform: translatez(-50px);
}
.front{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    line-height: 100px;
    text-align: center;
    color: #fff;
    background-color: rgba(50,100,100,.5);
    -webkit-transform: rotatex(0deg) translatez(50px);
    -moz-transform: rotatex(0deg) translatez(50px);
    -ms-transform: rotatex(0deg) translatez(50px);
    -o-transform: rotatex(0deg) translatez(50px);
    transform: rotatex(0deg) translatez(50px);
    /* perspective和preserve-3d都可以触发子元素child的3d表现，但是两者同时作用的时候又会有区别，我猜测：preserve-3d带有一个默认的perspective值 */
    /* perspective: 200px; */
    /* transform-style: preserve-3d; */
}
.child{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    line-height: 2;
    text-align: right;
    background-color: rgba(255,255,255,.5);
    -webkit-transform: rotatex(60deg);
    -moz-transform: rotatex(60deg);
    -ms-transform: rotatex(60deg);
    -o-transform:...

JavaScript

var stage = document.querySelector('.stage'),
    front = document.querySelector('.front'),
    back = document.querySelector('.back');

stage.addEventListener('mouseenter', function(e){
    console.log('Mouse Enter');
    var e = e || window.event;
    front.style.transform = 'rotatex(90deg) translatez(50px)';
    back.style.transform = 'rotatex(0deg) translatez(50px)';
});
stage.addEventListener('mouseleave', function(e){
    console.log('Mouse Leave');
    var e = e || window.event;
    front.style.transform = 'rotatex(0deg) translatez(50px)';
    back.style.transform = 'rotatex(-90deg) translatez(50px)';
});