FORK ME

console 命令行工具 X clear

                    
>
console
$(function () {
    $('.range-wrap input').on('input change contextmenu', function(e) {
        var _  = $(this),
            vl = _.attr('value');

        if (e.type === 'contextmenu') {
            _.val(vl);
        }

        var val    = _.val(),
            rw     = _.closest('.range-wrap'),
            orix   = rw.find('#i-orix').val(),
            oriy   = rw.find('#i-oriy').val(),
            per    = rw.find('#i-per').val(),
            x      = rw.find('#i-x').val(),
            y      = rw.find('#i-y').val(),
            z      = rw.find('#i-z').val(),
            deg    = rw.find('#i-deg').val(),
            origrn = `${orix}% ${oriy}%`,
            value  = `perspective(${per}px) rotate3d(${x}, ${y}, ${z}, ${deg}deg)`;

        _.siblings('i').find('em').text(val);
        $('.iw').css({
            'transform-origin': origrn,
            'transform': value
        });
        $('#css-code').text(`transform-origin: ${orix}% ${oriy}%; transform: perspective(${per}px) rotate3d(${x}, ${y}, ${z}, ${deg}deg);`);
        return false;
    });
});
<div class="wrapper">
        <div class="iw">
            <img src="http://wx4.sinaimg.cn/large/006ppPxUgy1fg4lqpmx1wj308c08cwed.jpg">
        </div>
        <div class="range-wrap">
            <div class="ipt-w">
                <i>origrnX : <em>50</em>%</i>
                <input id="i-orix" type="range" min="0" max="100" step="1" data-val="50" value="50">
            </div>
            <div class="ipt-w">
                <i>origrnY : <em>50</em>%</i>
                <input id="i-oriy" type="range" min="0" max="100" step="1" value="50">
            </div>

            <div class="ipt-w">
                <i>perspective : <em>400</em>px</i>
                <input id="i-per" type="range" min="1" max="1200" step="1" value="400">
            </div>

            <div class="ipt-w">
                <i>rotateX : <em>0</em></i>
                <input id="i-x" type="range" min="-1" max="1" step="0.01" value="0">
            </div>

            <div class="ipt-w">
                <i>rotateY : <em>0</em></i>
                <input id="i-y" type="range" min="-1" max="1" step="0.01" value="0">
            </div>

            <div class="ipt-w">
                <i>rotateZ : <em>0</em></i>
                <input id="i-z" type="range" min="-1" max="1" step="0.01" value="0">
            </div>

            <div class="ipt-w">
                <i>angle : <em>0</em>deg</i>
                <input id="i-deg" type="range" min="-360" max="360" step="1" value="0">
            </div>
        </div>
        <div id="css-code"></div>
    </div>
/* css reset */
body,p,ol,ul,li,dl,dd,h1,h2,h3,h4,h5,h6,input,iframe,nav,header,footer {
    margin: 0;
    padding: 0;
    list-style: none;
}
html {
    overflow-y: scroll;
    overflow-x: hidden;
}
body {
    font: 16px Microsoft YaHei, sans-serif;
    color: #2a2b2c;
    background: #f7f7f7;
}
a,img {
    text-decoration: none;
    color: #2a2b2c;
    border: 0;
}
img {
    display: block;
}
*, *::before, *::after {
    outline: none;
    box-sizing: border-box;
}
.wrapper {
    width: 500px;
    margin: 50px auto 100px auto;
}
.iw {
    width: 200px;
    height: 200px;
    border-radius: 55%;
    padding: 35px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 0 15px #999;
    opacity: .9;
    outline: 1px dotted #ddd;
    margin: 0 auto 30px auto;
    transform-origin: 50% 50%;
    transform: perspective(400px) rotate3d(0.1, 0, 0, 0deg);
    transition: linear .4s;
}
.iw img {
    width: 100%;
    height: 100%;
}
input[type="range"] {
    display: block;
    margin-bottom: 10px;
    width: 100%;
}
.range-wrap {
    width: 100%;
    position: relative;
    z-index: 999;
}
.ipt-w i {
    font-size: 12px;
    color: #999;
}
#css-code {
    font-size: 12px;
    color: #09d;
}