使用CSS3实现的3D热点监控

可以拖动下方的滑块来调整3D视角。

css3, 3d

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var wdf = {
    'hotspots': [{
        'y': 0,
        'x': -250,
        'z': 0,
        'start': 34,
        'end': 58
    }, {
        'y': -80,
        'x': -100,
        'z': 100,
        'start': 16,
        'end': 60
    }, {
        'y': 80,
        'x': 200,
        'z': 100,
        'start': 16,
        'end': 44
    }, {
        'y': 30,
        'x': 100,
        'z': -100,
        'start': 0,
        'end': 60
    }]
}

var $input = document.querySelector('[data-js-input]');
var $susan = document.querySelector('[data-js-susan]');
var $dimsum = document.querySelector('[data-js-dimsum]');
var $spotsContainer = document.querySelector('[data-js-spots]');
var $$swivels = null;
var $readout1 = document.querySelector('[data-js-readout-1]');
var $readout2 = document.querySelector('[data-js-readout-2]');
var steps = 0;
var angle = 0;
var frame = 0;

var init = function() {
    steps = (parseInt($input.getAttribute('max')) - parseInt($input.getAttribute('min'))) / parseInt($input.getAttribute('step'));
    angle = $input.value;
    frame = getFrame(angle);
    hotspotsInit();
    registerEvents();
};

var getFrame = function(angle) {
    return Math.round(((parseInt(angle) + 180) / 360) * steps)
}

var spin = function(ev) {
    angle = $input.value;
    frame = getFrame(angle);
    spinObject(angle, frame);
    hotspotsCheck(angle, frame);
}

var spinObject = function() {
    $dimsum.style.transform = 'rotateY(' + angle + 'deg)';
    $readout1.innerText = angle + '˚';
    $readout2.innerText = 'frame ' + frame;
}

var hotspotsInit = function() {
    var hotspots = wdf.hotspots;
    var $hotspotEl = null;
    var $hotspotElInner = null;
    for (var i = 0; i < hotspots.length; i++) {
        hotspotBuild(i);
    }
    $$swivels = document.querySelectorAll('[data-js-swivel]');
    hotspotsCheck();
};

var hotspotBuild = function(index) {

$hotspotEl = document.createElement('span');
    $hotspotEl.classList.add('spot');
    $hotspotEl.id = 'spot' + index;
    $hotspotEl.style.transform = hotspotPlot(index);
    $hotspotEl.style.webkitTransform = hotspotPlot(index);

$hotspotElInner = document.createElement('span');
    $hotspotElInner.classList.add('spot__inner');
    $hotspotElInner.setAttribute('data-js-swivel', '');
    $hotspotElInner.innerText = index;

$hotspotEl.appendChild($hotspotElInner);
    $spotsContainer.appendChild($hotspotEl);

}

var hotspotOn = function(index) {
    if (wdf.hotspots[index].visible !== true) {
        document.querySelector('#spot' + index).classList.add('spot--visible');
        wdf.hotspots[index].visible = true;
    }
}

var hotspotOff = function(index) {
    if (wdf.hotspots[index].visible === true) {
        document.querySelector('#spot' + index).classList.remove('spot--visible');
        wdf.hotspots[index].visible = false;
    }
}

var hotspotPlot = function(index) {
    var hotspotPlotX = wdf.hotspots[index].x + 'px';
    var hotspotPlotY = wdf.hotspots[index].y + 'px';
    var hotspotPlotZ = wdf.hotspots[index].z + 'px';
    return 'translate3d(' + hotspotPlotX + ', ' + hotspotPlotY + ', ' + hotspotPlotZ + ')';
}

var hotspotsRotate = function() {
    for (var i = 0; i < $$swivels.length; i++) {

$$swivels[i].style.transform = 'rotateY(' + (angle < 0 ? 360 - angle : '-' + angle) + 'deg)';
    }
}

var registerEvents = function() {
    $input.addEventListener('input', spin);
};

init();

编译

CSS

.container {
    width: 600px;
    max-width: 100%;
}
.lazysusan {
    position: relative;
    width: 100%;
    padding-top: 55%;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
    perspective: 1200px;
}
.lazysusan__dimsum {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 80%;
    height: 70%;
    margin: -18% 0 0 -40%;
    transform-style: preserve-3d;
}
.lazysusan__dimsum__front,
.lazysusan__dimsum__back {
    position: absolute;
    top: 0;
    left: 100%;
    width: 30%;
    height: 100%;
    margin: 0 0 0 -15%;
    background-color: #2ECC40;
    opacity: 0.8;
    transform: rotateY(90deg);
}
.lazysusan__dimsum__back {
    right: 100%;
    left: auto;
    margin: 0 -15% 0 0;
    background-color: #FFDC00;
}
.lazysusan__dimsum__left,
.lazysusan__dimsum__right {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    background-color: #FF4136;
    opacity: 0.8;
    transform: translateZ(70px);
}
.lazysusan__dimsum__right {
    background-color: #0074D9;
    transform: translateZ(-70px);
}
.input {
    width: 100%;
    margin: 20px 0;
}
.input__scale {
    position: relative;
    border-bottom: 1px solid;
    margin-bottom: 50px;
}
.input__scale__line {
    position: absolute;
    top: 10px;
    left: 0;
    width: 3em;
    margin: 0 0 0 -1.5em;
    text-align: center;
}
.input__scale__line:before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 100%;
    height: 20px;
    border-left: 1px solid #666;
}
.input__scale__line--m {
    left: 50%;
}
.input__scale__line--r {
    left: 100%;
}
.input__readout {
    display: block;
    margin: 10px 0;
    text-align: center;
    font-size: 2em;
}
.spots {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-style: preserve-3d;
}
.spot {
    display: block;
    position: absolute;
    top: 0;
    max-height: 0;
    margin: -20px 0 0 -20px;
    text-align: center;
    opacity: 0;
    overflow: hidden;
    transition: opacity 600ms;
    transform-style: preserve-3d;
}
.spot--visible {
    max-height: 99px;
    opacity: 1;
    cursor: pointer;
    overflow: visible;
}
.spot--visible:hover {
    opacity: 1;
    transition: opacity 100ms;
}
.spot__inner {
    display: block;
    width: 40px;
    height: 40px;
    background-color: #fff;
    border: 1px solid #000;
    border-radius: 100%;
    line-height: 38px;
    text-align: center;
}
/* MISC */

* {
    box-sizing: border-box;
}
html {
    margin: 20px 50px;
    font-size: 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
.gridpaper {
    display: block;
    padding: 10px;
    border: 1px solid #ccc;
    background-position: 10px 10px;
    background-size: 100px 100px;
    background-repeat: repeat;
    background-image: linear-gradient(0deg, transparent 0px, transparent 99px, rgba(0, 0, 0, 0.8) 100px), linear-gradient(90deg, transparent 0px, transparent 99px, rgba(0, 0, 0, 0.8) 100px), linear-gradient(0deg, transparent 0px, transparent 49px, rgba(0, 0, 0, 0.5) 50px, transparent 50px), linear-gradient(90deg, transparent 0px, transparent 49px, rgba(0, 0, 0, 0.5) 50px, transparent 50px), linear-gradient(0deg, transparent 0px, transparent 9px, rgba(0, 0, 0, 0.3) 10px, transparent 10px, transparent 19px, rgba(0, 0, 0, 0.3) 20px, transparent 20px, transparent 29px, rgba(0, 0, 0, 0.3) 30px, transparent 30px, transparent 39px, rgba(0, 0, 0, 0.3) 40px, transparent 40px, transparent 59px, rgba(0, 0, 0, 0.3) 60px, transparent 60px, transparent 69px, rgba(0, 0, 0, 0.3) 70px, transparent 70px, transparent 79px, rgba(0, 0, 0, 0.3) 80px, transparent 80px, transparent 89px, rgba(0, 0, 0, 0.3) 90px, transparent 90px), linear-gradient(90deg, transparent 0px, transparent 9px, rgba(0, 0, 0, 0.3) 10px, transparent 10px, transparent 19px, rgba(0, 0, 0, 0.3) 20px, transparent 20px, transparent 29px, rgba(0, 0, 0, 0.3) 30px, transparent 30px, transparent 39px, rgba(0, 0, 0, 0.3) 40px, transparent 40px, transparent 59px, rgba(0, 0, 0, 0.3) 60px, transparent 60px, transparent 69px, rgba(0, 0, 0, 0.3) 70px, transparent 70px, transparent 79px, rgba(0, 0, 0, 0.3) 80px, transparent 80px, transparent 89px, rgba(0, 0, 0, 0.3) 90px, transparent 90px);
}
.gridpaper > *:first-child {
    box-shadow: 0 0 5px;
    background: rgba(255, 255, 255, 0.5);
}

HTML

<span class="input__readout" data-js-readout-1>0˚</span>
    <span class="input__readout" data-js-readout-2>frame 30</span>

</div>

可以拖动下方的滑块来调整3D视角。

css3, 3d

编辑器支持Emmet

快捷键

可以拖动下方的滑块来调整3D视角。

css3, 3d

使用CSS3实现可乐罐子的3D旋转展示

使用CSS3弹性框（Flexbox）实现的标签栏控件

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：