JSFiddle - React, Tailwind, and code Playground

by jiang bourne

HTML

<div class="transform-style">
    <h3>鼠标放到图片上面来查看效果哦！(图片反转360度)</h3>
    <div class="container">
        <div class="inner">
            <div class="rotate">
                <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
            </div>
        </div>
    </div>

    <h3>鼠标放到图片上面来查看效果哦！(图片反转360度--使用transform-style: preserve-3d;效果)</h3>
    <div class="container">
        <div class="inner">
            <div class="rotate three-d">
                <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
            </div>
        </div>
    </div>
    </div>

CSS

.transform-style .container {
        width:500px;
        height:300px;
        margin:10px auto;
        position:relative;
    }
    .transform-style .inner {
        width:142px;
        height:200px;
        position:absolute;
    }
    //设置动画
    @keyframes inner{
        0%{
            transform:rotateY(0deg)
        }
        100%{
            transform:rotateY(360deg)
        }
    }
    //调用动画
    .transform-style .inner:hover{
        animation:inner 5s linear infinite;
    }

    .transform-style .rotate {
        background: url("http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg") no-repeat center;
        border: 5px solid hsla(50,50%,50%,.9);
        transform: perspective(200px) rotateY(45deg);
    }
    .transform-style .rotate img{
        border: 1px solid green;
        transform: rotateX(15deg) translateZ(10px);
        transform-origin: 0 0 40px;
    }
    //改变transform-style的默认值
    .transform-style .three-d {
        transform-style: preserve-3d;
    }