Interactive CSS3 iPhone 6 交互模型

iPhone 6 交互模型参考源： https://github.com/MorenoDiDomenico/Interactive-CSS3-iPhone6

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 6062
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var IPHONE = window.IPHONE || {};

IPHONE.loading = function() {
    setTimeout(function() {
        $('.loading').fadeOut(200, function() {
            IPHONE.init();
        });
    }, 3500);
}

IPHONE.controls = function() {
    $('.app a, .home a').on('click', function(e) {
        e.preventDefault();

IPHONE.alert('show');
    });

$('.alert a').on('click', function(e) {
        e.preventDefault();

IPHONE.alert('hide');
    });

$('.power').on('click', function(e) {
        e.preventDefault();
        $('.overlay').fadeOut();
        $('.lock').fadeIn();
    });

}

IPHONE.alert = function(action) {

if (action === 'show') {
        $('.overlay').fadeIn(200, function() {
            $('.alert').addClass('pop');
        })
    } else {
        $('.overlay').fadeOut(200, function() {
            $('.alert').removeClass('pop');
        });
    }
}

IPHONE.switch = function() {
    $('#switch a').on('click', function(e) {
        e.preventDefault();
        var $color = $(this).data('color');

$('#iphone-6').removeClass().addClass($color);
    })
}

IPHONE.setTime = function() {
    var $now = new Date();
    var $hours = ($now.getHours() > 9) ? $now.getHours() : '0' + $now.getHours();
    var $minutes = ($now.getMinutes() > 9) ? $now.getMinutes() : '0' + $now.getMinutes();

$('.time').text($hours + ':' + $minutes);
}

IPHONE.parallaxBG = function() {
    $.parallaxify({
        positionProperty: 'transform',
        responsive: true,
        motionType: 'natural',
        mouseMotionType: 'performance',
        motionAngleX: 70,
        motionAngleY: 70,
        alphaFilter: 0.5,
        adjustBasePosition: true,
        alphaPosition: 0.025,
    });
}

IPHONE.pin = function() {
    var $pin = 1234;
    var $input = '';
    var $count = 0;

$('.keyboard div').on('click', function(e) {

e.preventDefault();
        var $number = $(this);
        var $value = $number.find('em').text();
        $input += $value;

$('.keyboard div').removeClass('click');

$number.addClass('click').delay(200).queue(function() {
            $(this).removeClass('click');
        });

$('.pills').removeClass('error').find('span').eq($count).addClass('fill');

$count++;

if ($count === 4)
            checkPin($input);

});

function checkPin($check) {
        $count = 0;
        $input = '';
        $('.pills').find('span').removeClass('fill');

if ($check == $pin) {
            $('.lock').fadeOut(200);
        } else {
            $('.pills').addClass('error');
        }
    }
}

IPHONE.init = function() {
    IPHONE.controls();
}

$(window).load(function() {
    IPHONE.loading();
    IPHONE.switch();
    IPHONE.setTime();
    IPHONE.pin();
    IPHONE.parallaxBG();
});

编译

CSS

body {
    background: #fff;
    font-family: 'Helvetica Neue', sans-serif;
    line-height: 1;
    color: #fff;
    font-size: 12px;
    background: url('http://res.cloudinary.com/themesholic/image/upload/v1420905671/bg_gjcb7t.png') center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}
#scenario {
    text-align: center;
    padding: 90px 0 180px 0;
}
#switch {
    position: relative;
    margin-bottom: 30px;
}
#switch a {
    width: 120px;
    line-height: 42px;
    color: #111;
    background: #fff;
    display: inline-block;
    font-weight: bold;
    text-decoration: none;
    letter-spacing: 1px;
    margin: 0 5px;
    -webkit-border-radius: 2px;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 2px;
    -moz-background-clip: padding;
    border-radius: 2px;
    background-clip: padding-box;
}
#switch a[data-color="black"] {
    background: #111;
    color: #fff;
}
#iphone-6 {
    width: 375px;
    height: 667px;
    padding: 105px 24px;
    background: #d9dbdc;
    position: relative;
    display: inline-block;
    -webkit-border-radius: 56px;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 56px;
    -moz-background-clip: padding;
    border-radius: 56px;
    background-clip: padding-box;
    -webkit-box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2);
}
#iphone-6:before {
    content: '';
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    position: absolute;
    top: 6px;
    left: 6px;
    background: #f8f8f8;
    z-index: 1;
    -webkit-border-radius: 50px;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 50px;
    -moz-background-clip: padding;
    border-radius: 50px;
    background-clip: padding-box;
}
#iphone-6 .power {
    position: absolute;
    right: -3px;
    width: 3px;
    height: 60px;
    background: #dcdcdc;
    top: 170px;
    cursor: pointer;
    -webkit-border-radius: 0 2px 2px 0;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 0 2px 2px 0;
    -moz-background-clip: padding;
    border-radius: 0 2px 2px 0;
    background-clip: padding-box;
}
#iphone-6 .volume-switch {
    position: absolute;
    left: -3px;
    width: 3px;
    height: 30px;
    background: #dcdcdc;
    top: 110px;
    -webkit-border-radius: 2px 0 0 2px;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 2px 0 0 2px;
    -moz-background-clip: padding;
    border-radius: 2px 0 0 2px;
    background-clip: padding-box;
}
#iphone-6 .volume-plus,
#iphone-6 .volume-minus {
    position: absolute;
    left: -3px;
    width: 3px;
    height: 60px;
    background: #dcdcdc;
    top: 170px;
    -webkit-border-radius: 2px 0 0 2px;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 2px 0 0 2px;
    -moz-background-clip: padding;
    border-radius: 2px 0 0 2px;
    background-clip: padding-box;
}
#iphone-6 .volume-minus {
    top: 260px;
}
#iphone-6 .line-top,
#iphone-6 .line-bottom {
    position: absolute;
    width: 100%;
    height: 14px;
    background: rgba(0, 0, 0, 0.2);
    left: 0;
    top: 70px;
}
#iphone-6 .line-bottom {
    top: auto;
    bottom: 70px;
}
#iphone-6 .camera {
    position: absolute;
    top: 25px;
    left: 50%;
    width: 12px;
    height: 12px;
    display: inline-block;
    background: #333;
    z-index: 4;
    -webkit-border-radius: 50%;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 50%;
    -moz-background-clip: padding;
    border-radius: 50%;
    background-clip: padding-box;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}
#iphone-6 .speaker {
    position: absolute;
    top: 60px;
    left: 50%;
    width: 60px;
    height: 6px;
    display: inline-block;
    background: #333;
    z-index: 4;
    -webkit-border-radius: 6px;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 6px;
    -moz-background-clip: padding;
    border-radius: 6px;
    background-clip: padding-box;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}
#iphone-6 .speaker:before {
    content: '';
    position: absolute;
    top: -5px;
    left: -30px;
    width: 15px;
    height: 15px;
    display: inline-block;
    background: #333;
    -webkit-border-radius: 50%;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 50%;
    -moz-background-clip: padding;
    border-radius: 50%;
    background-clip: padding-box;
}
#iphone-6 .home {
    width: 64px;
    height: 64px;
    position: absolute;
    z-index: 4;
    bottom: 20px;
    left: 50%;
    -webkit-border-radius: 50%;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 50%;
    -moz-background-clip: padding;
    border-radius: 50%;
    background-clip: padding-box;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    background: #d7d7d7;
    background: linear-gradient(135deg, #d7d7d7 0%, #7a7a7a 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#d7d7d7', endColorstr='#7a7a7a', GradientType=1);
}
#iphone-6 .home:after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 58px;
    height: 58px;
    background: #fff;
    display: inline-block;
    -webkit-border-radius: 50%;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 50%;
    -moz-background-clip: padding;
    border-radius: 50%;
    background-clip: padding-box;
}
#iphone-6 .home a {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}
#iphone-6 .screen {
    width: 375px;
    height: 667px;
    position: relative;
    z-index: 2;
    overflow: hidden;
    -webkit-box-shadow: 0 0 0 3px #111;
    -moz-box-shadow: 0 0 0 3px #111;
    box-shadow: 0 0 0 3px #111;
    -webkit-border-radius: 1px;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 1px;
    -moz-background-clip: padding;
    border-radius: 1px;
    background-clip: padding-box;
}
#iphone-6 .screen .topbar {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 7;
}
#iphone-6 .screen .topbar .signal {
    position: absolute;
    left: 10px;
    top: 5px;
    line-height: 1;
}
#iphone-6 .screen .topbar .signal span {
    width: 5px;
    height: 5px;
    border: 1px solid #fff;
    display: inline-block;
    margin: 0 2px 0 0;
    -webkit-border-radius: 50%;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 50%;
    -moz-background-clip: padding;
    border-radius: 50%;
    background-clip: padding-box;
}
#iphone-6 .screen .topbar .signal span.full {
    background: #fff;
}
#iphone-6 .screen .topbar .time {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 5px;
}
#iphone-6 .screen .topbar .battery {
    position: absolute;
    right: 10px;
    top: 5px;
    width: 20px;
    height: 8px;
    border: 1px solid #fff;
    display: inline-block;
    -webkit-border-radius: 2px;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 2px;
    -moz-background-clip: padding;
    border-radius: 2px;
    background-clip: padding-box;
}
#iphone-6 .screen .topbar .battery:before {
    content: '';
    position: absolute;
    right: -3px;
    width: 3px;
    height: 4px;
    top: 2px;
    background: #fff;
    display: inline-block;
    -webkit-border-radius: 0 1px 1px 0;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 0 1px 1px 0;
    -moz-background-clip: padding;
    border-radius: 0 1px 1px 0;
    background-clip: padding-box;
}
#iphone-6 .screen .topbar .battery:after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 7px;
    height: 6px;
    background: #fff;
    display: inline-block;
}
#iphone-6 .screen .loading {
    background: #fff;
    z-index: 9;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#iphone-6 .screen .loading img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 78px;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
#iphone-6 .screen .wallpaper {
    width: 495px;
    height: 787px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    background: url(http://res.cloudinary.com/themesholic/image/upload/v1420903986/wallpaper_xe4crd.jpg) center;
    -webkit-background-size: 495px 787px;
    -moz-background-size: 495px 787px;
    background-size: 495px 787px;
    margin-top: -393.5px;
    margin-left: -247.5px;
}
#iphone-6 .screen .dashboard {
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#iphone-6 .screen .dashboard .grid {
    position: absolute;
    top: 30px;
    display: block;
    margin: 0 30px;
}
#iphone-6 .screen .dashboard .dock {
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    width: 100%;
    padding: 15px 30px;
    overflow: hidden;
}
#iphone-6 .screen .dashboard .dock:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(http://res.cloudinary.com/themesholic/image/upload/v1420903986/wallpaper_xe4crd.jpg) bottom center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -webkit-filter: blur(10px) brightness(0.9) saturate(90%) contrast(90%);
    -moz-filter: blur(10px) brightness(0.9) saturate(90%) contrast(90%);
    -ms-filter: blur(10px) brightness(0.9) saturate(90%) contrast(90%);
    filter: blur(10px) brightness(0.9) saturate(90%) contrast(90%);
}
#iphone-6 .screen .dashboard .dock:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
}
#iphone-6 .screen .dashboard .dock .app {
    margin-bottom: 10px;
}
#iphone-6 .screen .dashboard .app {
    width: 62px;
    height: 62px;
    display: inline-block;
    float: left;
    margin: 0 22px 26px 0;
    position: relative;
    z-index: 3;
}
#iphone-6 .screen .dashboard .app.last {
    margin-right: 0;
}
#iphone-6 .screen .dashboard .app img {
    width: 100%;
    margin: -5px 0 0 -5px;
    float: left;
    width: 72px;
    height: 72px;
}
#iphone-6 .screen .dashboard .app .label {
    width: 120%;
    text-align: center;
    position: absolute;
    font-size: 11px;
    bottom: -14px;
    left: -10%;
}
#iphone-6 .screen .lock {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 6;
    background: url(http://res.cloudinary.com/themesholic/image/upload/v1420903986/wallpaper_xe4crd.jpg) center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}
#iphone-6 .screen .lock:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(http://res.cloudinary.com/themesholic/image/upload/v1420903986/wallpaper_xe4crd.jpg) bottom center;
    -webkit-filter: blur(10px) brightness(0.9) saturate(90%) contrast(90%);
    -moz-filter: blur(10px) brightness(0.9) saturate(90%) contrast(90%);
    -ms-filter: blur(10px) brightness(0.9) saturate(90%) contrast(90%);
    filter: blur(10px) brightness(0.9) saturate(90%) contrast(90%);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}
#iphone-6 .screen .lock:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.05);
}
#iphone-6 .screen .lock .text {
    position: absolute;
    top: 90px;
    width: 100%;
    text-align: center;
    font-size: 16px;
    letter-spacing: 1px;
    font-weight: lighter;
    z-index: 2;
}
#iphone-6 .screen .lock .pills {
    position: absolute;
    width: 100%;
    top: 125px;
    z-index: 2;
    -webkit-animation-duration: 0.9s;
    -moz-animation-duration: 0.9s;
    -o-animation-duration: 0.9s;
    animation-duration: 0.9s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
}
#iphone-6 .screen .lock .pills span {
    width: 8px;
    height: 8px;
    display: inline-block;
    margin: 0 10px;
    border: 1px solid #87bbf8;
    -webkit-border-radius: 50%;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 50%;
    -moz-background-clip: padding;
    border-radius: 50%;
    background-clip: padding-box;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
}
#iphone-6 .screen .lock .pills span.fill {
    background: #87bbf8;
}
#iphone-6 .screen .lock .pills.error {
    -webkit-animation-name: shake;
    -moz-animation-name: shake;
    -o-animation-name: shake;
    animation-name: shake;
}
#iphone-6 .screen .lock .pills lesshat-selector {
    -lh-property: 0;
}
@-webkit-keyframes shake {
    0%, 100% {
        -webkit-transform: translate3d(0, 0, 0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translate3d(-10px, 0, 0);
    }
    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translate3d(10px, 0, 0);
    }
}
@-moz-keyframes shake {
    0%, 100% {
        -moz-transform: translate3d(0, 0, 0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        -moz-transform: translate3d(-10px, 0, 0);
    }
    20%,
    40%,
    60%,
    80% {
        -moz-transform: translate3d(10px, 0, 0);
    }
}
@-o-keyframes shake {
    0%, 100% {
        -o-transform: translate3d(0, 0, 0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        -o-transform: translate3d(-10px, 0, 0);
    }
    20%,
    40%,
    60%,
    80% {
        -o-transform: translate3d(10px, 0, 0);
    }
}
@keyframes shake {
    0%, 100% {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        -moz-transform: translate3d(-10px, 0, 0);
        -ms-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }
    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translate3d(10px, 0, 0);
        -moz-transform: translate3d(10px, 0, 0);
        -ms-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
}
#iphone-6 .screen .lock .pills lesshat-selector {
    -lh-property: 0;
}
@-webkit-keyframes shake {
    0%, 100% {
        -webkit-transform: translate3d(0, 0, 0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translate3d(-10px, 0, 0);
    }
    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translate3d(10px, 0, 0);
    }
}
@-moz-keyframes shake {
    0%, 100% {
        -moz-transform: translate3d(0, 0, 0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        -moz-transform: translate3d(-10px, 0, 0);
    }
    20%,
    40%,
    60%,
    80% {
        -moz-transform: translate3d(10px, 0, 0);
    }
}
@-o-keyframes shake {
    0%, 100% {
        -o-transform: translate3d(0, 0, 0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        -o-transform: translate3d(-10px, 0, 0);
    }
    20%,
    40%,
    60%,
    80% {
        -o-transform: translate3d(10px, 0, 0);
    }
}
@keyframes shake {
    0%, 100% {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        -moz-transform: translate3d(-10px, 0, 0);
        -ms-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }
    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translate3d(10px, 0, 0);
        -moz-transform: translate3d(10px, 0, 0);
        -ms-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
}
#iphone-6 .screen .lock .keyboard {
    position: absolute;
    display: block;
    top: 200px;
    margin: 0 40px;
    z-index: 2;
}
#iphone-6 .screen .lock .keyboard .number {
    width: 72px;
    height: 72px;
    border: 1px solid #87bbf8;
    float: left;
    margin: 0 35px 15px 0;
    cursor: pointer;
    position: relative;
    -webkit-border-radius: 50%;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 50%;
    -moz-background-clip: padding;
    border-radius: 50%;
    background-clip: padding-box;
    -webkit-animation-duration: 0.4s;
    -moz-animation-duration: 0.4s;
    -o-animation-duration: 0.4s;
    animation-duration: 0.4s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
}
#iphone-6 .screen .lock .keyboard .number.click {
    -webkit-animation-name: click;
    -moz-animation-name: click;
    -o-animation-name: click;
    animation-name: click;
}
#iphone-6 .screen .lock .keyboard .number.click lesshat-selector {
    -lh-property: 0;
}
@-webkit-keyframes click {
    0% {
        background: transparent;
    }
    50% {
        background: #87bbf8;
    }
    100% {
        background: transparent;
    }
}
@-moz-keyframes click {
    0% {
        background: transparent;
    }
    50% {
        background: #87bbf8;
    }
    100% {
        background: transparent;
    }
}
@-o-keyframes click {
    0% {
        background: transparent;
    }
    50% {
        background: #87bbf8;
    }
    100% {
        background: transparent;
    }
}
@keyframes click {
    0% {
        background: transparent;
    }
    50% {
        background: #87bbf8;
    }
    100% {
        background: transparent;
    }
}
#iphone-6 .screen .lock .keyboard .number.click lesshat-selector {
    -lh-property: 0;
}
@-webkit-keyframes click {
    0% {
        background: transparent;
    }
    50% {
        background: #87bbf8;
    }
    100% {
        background: transparent;
    }
}
@-moz-keyframes click {
    0% {
        background: transparent;
    }
    50% {
        background: #87bbf8;
    }
    100% {
        background: transparent;
    }
}
@-o-keyframes click {
    0% {
        background: transparent;
    }
    50% {
        background: #87bbf8;
    }
    100% {
        background: transparent;
    }
}
@keyframes click {
    0% {
        background: transparent;
    }
    50% {
        background: #87bbf8;
    }
    100% {
        background: transparent;
    }
}
#iphone-6 .screen .lock .keyboard .number.last {
    margin-right: 0;
}
#iphone-6 .screen .lock .keyboard .number.center {
    margin-right: 0;
    margin-left: 107px;
}
#iphone-6 .screen .lock .keyboard .number.center em {
    margin-top: 8px;
}
#iphone-6 .screen .lock .keyboard .number em {
    font-style: normal;
    font-size: 38px;
    font-weight: lighter;
    position: absolute;
    top: 10px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}
#iphone-6 .screen .lock .keyboard .number span {
    position: absolute;
    width: 100%;
    text-align: center;
    left: 0;
    bottom: 10px;
    font-size: 9px;
    letter-spacing: 1px;
    font-weight: lighter;
}
#iphone-6 .screen .lock .emergency,
#iphone-6 .screen .lock .delete {
    position: absolute;
    left: 45px;
    bottom: 30px;
    font-size: 14px;
    font-weight: lighter;
    letter-spacing: 1px;
    z-index: 2;
}
#iphone-6 .screen .lock .delete {
    left: auto;
    right: 45px;
}
#iphone-6 .screen .overlay {
    position: absolute;
    z-index: 9;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
}
#iphone-6 .screen .overlay .alert {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    background: #fff;
    color: #111;
    padding: 15px 0;
    width: 220px;
    -webkit-border-radius: 10px;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 10px;
    -moz-background-clip: padding;
    border-radius: 10px;
    background-clip: padding-box;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(1.2);
    -moz-transform: translateX(-50%) translateY(-50%) scale(1.2);
    -o-transform: translateX(-50%) translateY(-50%) scale(1.2);
    -ms-transform: translateX(-50%) translateY(-50%) scale(1.2);
    transform: translateX(-50%) translateY(-50%) scale(1.2);
}
#iphone-6 .screen .overlay .alert.pop {
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
#iphone-6 .screen .overlay .alert .text {
    padding: 5px 5px 20px;
    margin-bottom: 15px;
    border-bottom: 1px solid #bebdb7;
}
#iphone-6 .screen .overlay .alert .text strong {
    display: block;
    font-size: 14px;
    margin-bottom: 5px;
}
#iphone-6 .screen .overlay .alert a {
    color: #0085ff;
    text-decoration: none;
    font-weight: bold;
}
#iphone-6.black {
    background: #4f4f4f;
}
#iphone-6.black:before,
#iphone-6.black .home:after {
    background: #0b0b0b;
}
#iphone-6.black .power,
#iphone-6.black .volume-switch,
#iphone-6.black .volume-plus,
#iphone-6.black .volume-minus {
    background: #333;
}

HTML

<div id="scenario">
    <div id="switch"><a href="#" data-color="white">WHITE</a><a href="#" data-color="black">BLACK</a>
    </div>
    <div id="iphone-6"><span class="power"></span><span class="volume-switch"></span><span class="volume-plus"></span><span class="volume-minus"></span><span class="line-top"></span><span class="line-bottom"></span><span class="camera"></span><span class="speaker"></span>
        <span
        class="home">
            <a href="#"></a>
            </span>
            <div class="screen">
                <div class="topbar">
                    <div class="signal"><span class="full"></span><span class="full"></span><span class="full"></span><span></span><span></span>T-Mobile</div>
                    <div class="time">00:00</div>
                    <div class="battery"></div>
                </div>
                <div class="loading"><img src="https://res.cloudinary.com/themesholic/image/upload/v1420903061/apple-logo_fsnscf.png" alt="" />
                </div>
                <div class="lock">
                    <div class="blur">
                        <div class="text">Touch ID or Enter Passcode (1234)</div>
                    </div>
                    <div class="pills"><span></span><span></span><span></span><span></span>
                    </div>
                    <div class="keyboard">
                        <div class="number"><em>1</em>
                        </div>
                        <div class="number"><em>2</em><span>DEF</span>
                        </div>
                        <div class="number last"><em>3</em><span>DEF</span>
                        </div>
                        <div class="number"><em>4</em><span>GHI</span>
                        </div>
                        <div class="number"><em>5</em><span>JKL</span>
                        </div>
                        <div class="number last"><em>6</em><span>MNO</span>
                        </div>
                        <div class="number"><em>7</em><span>PQRS</span>
                        </div>
                        <div class="number"><em>8</em><span>TUV</span>
                        </div>
                        <div class="number last"><em>9</em><span>WXYZ</span>
                        </div>
                        <div class="number center"><em>0</em>
                        </div>
                    </div>
                    <div class="emergency">Emergency</div>
                    <div class="delete">Delete</div>
                </div>
                <div data-parallaxify-range-x="100" data-parallaxify-range-y="100" class="wallpaper"></div>
                <div class="dashboard">
                    <div class="grid">
                        <div class="app">
                            <a href="#"><img src="https://res.cloudinary.com/themesholic/image/upload/v1420903078/Contacts_cxxz7a.png" alt="" />
                            </a><span class="label">Contacts</span>
                        </div>
                        <div class="app">
                            <a href="#"><img src="https://res.cloudinary.com/themesholic/image/upload/v1420903078/Calendar_f1uqvh.png" alt="" />
                            </a><span class="label">Contacts</span>
                        </div>
                        <div class="app">
                            <a href="#"><img src="https://res.cloudinary.com/themesholic/image/upload/v1420903082/Photos_ncdjfm.png" alt="" />
                            </a><span class="label">Photos</span>
                        </div>
                        <div class="app last">
                            <a href="#"><img src="https://res.cloudinary.com/themesholic/image/upload/v1420903078/Camera_umxrmx.png" alt="" />
                            </a><span class="label">Camera</span>
                        </div>
                        <div class="app">
                            <a href="#"><img src="https://res.cloudinary.com/themesholic/image/upload/v1420903084/Weather_xbr0gt.png" alt="" />
                            </a><span class="label">Weather</span>
                        </div>
                        <div class="app">
                            <a href="#"><img src="https://res.cloudinary.com/themesholic/image/upload/v1420903078/Clock_yzoftd.png" alt="" />
                            </a><span class="label">Clock</span>
                        </div>
                        <div class="app">
                            <a href="#"><img src="https://res.cloudinary.com/themesholic/image/upload/v1420903080/Maps_xhr2wu.png" alt="" />
                            </a><span class="label">Maps</span>
                        </div>
                        <div class="app last">
                            <a href="#"><img src="https://res.cloudinary.com/themesholic/image/upload/v1420903083/Videos_oxaryk.png" alt="" />
                            </a><span class="label">Videos</span>
                        </div>
                        <div class="app">
                            <a href="#"><img src="https://res.cloudinary.com/themesholic/image/upload/v1420903081/Notes_dminu5.png" alt="" />
                            </a><span class="label">Notes</span>
                        </div>
                        <div class="app">
                            <a href="#"><img src="https://res.cloudinary.com/themesholic/image/upload/v1420903082/Reminders_hokpkq.png" alt="" />
                            </a><span class="label">Reminders</span>
                        </div>
                        <div class="app">
                            <a href="#"><img src="https://res.cloudinary.com/themesholic/image/upload/v1420903082/Stocks_q7gz1l.png" alt="" />
                            </a><span class="label">Stocks</span>
                        </div>
                        <div class="app last">
                            <a href="#"><img src="https://res.cloudinary.com/themesholic/image/upload/v1420903079/Game-Center_vjssfs.png" alt="" />
                            </a><span class="label">Game Center</span>
                        </div>
                        <div class="app">
                            <a href="#"><img src="https://res.cloudinary.com/themesholic/image/upload/v1420903080/Newstand_d1peg9.png" alt="" />
                            </a><span class="label">Newstand</span>
                        </div>
                        <div class="app">
                            <a href="#"><img src="https://res.cloudinary.com/themesholic/image/upload/v1420903080/iTunes-Store_rvmevm.png" alt="" />
                            </a><span class="label">Itunes Store</span>
                        </div>
                        <div class="app">
                            <a href="#"><img src="https://res.cloudinary.com/themesholic/image/upload/v1420903078/AppStore_fwljbl.png" alt="" />
                            </a><span class="label">App Store		</span>
                        </div>
                        <div class="app last">
                            <a href="#"><img src="https://res.cloudinary.com/themesholic/image/upload/v1420903079/iBooks_bwkcrq.png" alt="" />
                            </a><span class="label">iBooks</span>
                        </div>
                        <div class="app">
                            <a href="#"><img src="https://res.cloudinary.com/themesholic/image/upload/v1420903079/Health_wzwtbc.png" alt="" />
                            </a><span class="label">Health</span>
                        </div>
                        <div class="app">
                            <a href="#"><img src="https://res.cloudinary.com/themesholic/image/upload/v1420903081/Passbook_dleh2h.png" alt="" />
                            </a><span class="label">Passbook</span>
                        </div>
                        <div class="app">
                            <a href="#"><img src="https://res.cloudinary.com/themesholic/image/upload/v1420903082/Settings_jv4gtd.png" alt="" />
                            </a><span class="label">Settings</span>
                        </div>
                    </div>
                    <div class="dock">
                        <div class="blur"></div>
                        <div class="app">
                            <a href="#"><img src="https://res.cloudinary.com/themesholic/image/upload/v1420903081/Phone_amnrxu.png" alt="" />
                            </a><span class="label">Phone</span>
                        </div>
                        <div class="app">
                            <a href="#"><img src="https://res.cloudinary.com/themesholic/image/upload/v1420903080/Messages_yozkdi.png" alt="" />
                            </a><span class="label">Messages</span>
                        </div>
                        <div class="app">
                            <a href="#"><img src="https://res.cloudinary.com/themesholic/image/upload/v1420903082/Safari_cuf8cz.png" alt="" />
                            </a><span class="label">Safari</span>
                        </div>
                        <div class="app">
                            <a href="#"><img src="https://res.cloudinary.com/themesholic/image/upload/v1420903080/Mail_itxz5o.png" alt="" />
                            </a><span class="label">Mail</span>
                        </div>
                    </div>
                </div>
                <div class="overlay">
                    <div class="alert">
                        <div class="text"><strong>Hiya!</strong>It's just a demo :)</div><a href="#">Dismiss</a>
                    </div>
                </div>
            </div>
    </div>
</div>

iPhone 6 交互模型参考源： https://github.com/MorenoDiDomenico/Interactive-CSS3-iPhone6

编辑器支持Emmet

快捷键

iPhone 6 交互模型 参考源： https://github.com/MorenoDiDomenico/Interactive-CSS3-iPhone6

使用CSS3 PerspectiveTransform实现的逼真3D地球自转动画

three.js gltf扩展（draco压缩，pbr，binary）模型加载代码示例

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

iPhone 6 交互模型参考源： https://github.com/MorenoDiDomenico/Interactive-CSS3-iPhone6