使用HTML和CSS实现三维电视机旋转控制操作

3D computer Html+CSS with rotating controls

h5,css,computer,rotate

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    margin: 0;
    background-color: #F6C3BA;
}
.computer {
    z-index: 1;
    width: 150px;
    height: 180px;
    position: absolute;
    left: calc(50% - 75px);
    top: calc(50vh - 90px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -o-transform-origin: center center;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -moz-transform: rotatex(-30deg) rotatey(45deg);
    -ms-transform: rotatex(-30deg) rotatey(45deg);
    -o-transform: rotatex(-30deg) rotatey(45deg);
    -webkit-transform: rotatex(-30deg) rotatey(45deg);
    transform: rotatex(-30deg) rotatey(45deg);
}
.screen {
    z-index: 1;
    width: 150px;
    height: 130px;
    position: absolute;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -o-transform-origin: center center;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -moz-transform: translatey(0px);
    -ms-transform: translatey(0px);
    -o-transform: translatey(0px);
    -webkit-transform: translatey(0px);
    transform: translatey(0px);
}
.square {
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.front {
    -moz-transform: translateZ(75px);
    -ms-transform: translateZ(75px);
    -o-transform: translateZ(75px);
    -webkit-transform: translateZ(75px);
    transform: translateZ(75px);
    background-color: #c6b5a4;
}
.back {
    -moz-transform: translateZ(-75px);
    -ms-transform: translateZ(-75px);
    -o-transform: translateZ(-75px);
    -webkit-transform: translateZ(-75px);
    transform: translateZ(-75px);
    background-color: #dbc6b5;
}
.top {
    -moz-transform: rotatex(90deg) translatez(75px);
    -ms-transform: rotatex(90deg) translatez(75px);
    -o-transform: rotatex(90deg) translatez(75px);
    -webkit-transform: rotatex(90deg) translatez(75px);
    transform: rotatex(90deg) translatez(75px);
    background-color: #EEDEC8;
    width: 100%;
    height: 150px;
}
.left {
    -moz-transform: rotatey(-90deg) translatez(55px);
    -ms-transform: rotatey(-90deg) translatez(55px);
    -o-transform: rotatey(-90deg) translatez(55px);
    -webkit-transform: rotatey(-90deg) translatez(55px);
    transform: rotatey(-90deg) translatez(55px);
    background-color: #282828;
}
.right {
    -moz-transform: rotatey(-90deg) translatez(-75px);
    -ms-transform: rotatey(-90deg) translatez(-75px);
    -o-transform: rotatey(-90deg) translatez(-75px);
    -webkit-transform: rotatey(-90deg) translatez(-75px);
    transform: rotatey(-90deg) translatez(-75px);
    background-color: #c6b5a4;
    padding: 15%;
    box-sizing: border-box;
}
.intake {
    width: 5%;
    height: 80%;
    float: left;
    background-color: #B4A495;
    margin: 0 2.5%;
}
.left1 {
    width: 130px;
    height: 110px;
    -moz-transform: rotatey(-90deg) translatez(70px);
    -ms-transform: rotatey(-90deg) translatez(70px);
    -o-transform: rotatey(-90deg) translatez(70px);
    -webkit-transform: rotatey(-90deg) translatez(70px);
    transform: rotatey(-90deg) translatez(70px);
    background-color: transparent;
    border: solid 10px #4d4d4d;
}
.progressbar {
    width: 50px;
    height: 6px;
    background-color: transparent;
    position: absolute;
    top: calc(50% - 7px);
    left: calc(50% - 29px);
    border: 2px solid #4EC456;
}
.progressbar:after {
    content: "";
    width: 60%;
    height: 100%;
    background-color: #4EC456;
    position: absolute;
    top: 0;
    left: 0;
}
.back1 {
    width: 15px;
    height: 110px;
    -moz-transform: translateZ(-65px) translatey(10px) translatex(5px);
    -ms-transform: translateZ(-65px) translatey(10px) translatex(5px);
    -o-transform: translateZ(-65px) translatey(10px) translatex(5px);
    -webkit-transform: translateZ(-65px) translatey(10px) translatex(5px);
    transform: translateZ(-65px) translatey(10px) translatex(5px);
    background-color: #4d4d4d;
}
.front1 {
    width: 15px;
    height: 110px;
    -moz-transform: translateZ(65px) translatey(10px) translatex(5px);
    -ms-transform: translateZ(65px) translatey(10px) translatex(5px);
    -o-transform: translateZ(65px) translatey(10px) translatex(5px);
    -webkit-transform: translateZ(65px) translatey(10px) translatex(5px);
    transform: translateZ(65px) translatey(10px) translatex(5px);
    background-color: #454545;
}
.bottom1 {
    -moz-transform: rotatex(90deg) translatez(-55px) translatex(5px);
    -ms-transform: rotatex(90deg) translatez(-55px) translatex(5px);
    -o-transform: rotatex(90deg) translatez(-55px) translatex(5px);
    -webkit-transform: rotatex(90deg) translatez(-55px) translatex(5px);
    transform: rotatex(90deg) translatez(-55px) translatex(5px);
    background-color: #565656;
    width: 15px;
    height: 130px;
}
.top1 {
    -moz-transform: rotatex(90deg) translatez(-55px) translatex(5px);
    -ms-transform: rotatex(90deg) translatez(-55px) translatex(5px);
    -o-transform: rotatex(90deg) translatez(-55px) translatex(5px);
    -webkit-transform: rotatex(90deg) translatez(-55px) translatex(5px);
    transform: rotatex(90deg) translatez(55px) translatex(5px);
    background-color: #454545;
    width: 15px;
    height: 130px;
}
.screenbottom {
    z-index: 0;
    width: 150px;
    height: 40px;
    position: absolute;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -o-transform-origin: center center;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -moz-transform: translatey(130px);
    -ms-transform: translatey(130px);
    -o-transform: translatey(130px);
    -webkit-transform: translatey(130px);
    transform: translatey(130px);
}
.front2 {
    -moz-transform: translateZ(75px);
    -ms-transform: translateZ(75px);
    -o-transform: translateZ(75px);
    -webkit-transform: translateZ(75px);
    transform: translateZ(75px);
    background-color: #c6b5a4;
}
.top2 {
    -moz-transform: rotatex(90deg) translatez(75px);
    -ms-transform: rotatex(90deg) translatez(75px);
    -o-transform: rotatex(90deg) translatez(75px);
    -webkit-transform: rotatex(90deg) translatez(75px);
    transform: rotatex(90deg) translatez(75px);
    background-color: #eedec8;
    width: 100%;
    height: 150px;
}
.left2 {
    -moz-transform: rotatey(-90deg) translatez(75px);
    -ms-transform: rotatey(-90deg) translatez(75px);
    -o-transform: rotatey(-90deg) translatez(75px);
    -webkit-transform: rotatey(-90deg) translatez(75px);
    transform: rotatey(-90deg) translatez(75px);
    background-color: #dbc6b5;
}
.right2 {
    -moz-transform: rotatey(-90deg) translatez(-75px);
    -ms-transform: rotatey(-90deg) translatez(-75px);
    -o-transform: rotatey(-90deg) translatez(-75px);
    -webkit-transform: rotatey(-90deg) translatez(-75px);
    transform: rotatey(-90deg) translatez(-75px);
    background-color: #c6b5a4;
}
.back2 {
    -moz-transform: translateZ(-75px);
    -ms-transform: translateZ(-75px);
    -o-transform: translateZ(-75px);
    -webkit-transform: translateZ(-75px);
    transform: translateZ(-75px);
    background-color: #dbc6b5;
}
.bottom2 {
    -moz-transform: rotatex(90deg) translatez(35px);
    -ms-transform: rotatex(90deg) translatez(35px);
    -o-transform: rotatex(90deg) translatez(35px);
    -webkit-transform: rotatex(90deg) translatez(35px);
    transform: rotatex(90deg) translatez(35px);
    background-color: #B4A495;
    width: 100%;
    height: 150px;
}
.screenbottombottom {
    z-index: 2;
    width: 130px;
    height: 20px;
    position: absolute;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -o-transform-origin: center center;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -moz-transform: translatey(170px) translatex(10px);
    -ms-transform: translatey(170px) translatex(10px);
    -o-transform: translatey(170px) translatex(10px);
    -webkit-transform: translatey(170px) translatex(10px);
    transform: translatey(170px) translatex(10px);
}
.bottom3 {
    -moz-transform: rotatex(90deg) translatez(45px);
    -ms-transform: rotatex(90deg) translatez(45px);
    -o-transform: rotatex(90deg) translatez(45px);
    -webkit-transform: rotatex(90deg) translatez(45px);
    transform: rotatex(90deg) translatez(45px);
    background-color: #65504d;
    box-shadow: 1px 1px 0px #65504d, 2px 2px 0px #65504d, 3px 3px 0px #65504d, 4px 4px 0px #65504d, 5px 5px 0px #65504d, 6px 6px 0px #65504d, 7px 7px 0px #65504d, 8px 8px 0px #65504d, 9px 9px 0px #65504d, 10px 10px 0px #65504d, 11px 11px 0px #65504d, 12px 12px 0px #65504d, 13px 13px 0px #65504d, 14px 14px 0px #65504d, 15px 15px 0px #65504d, 16px 16px 0px #65504d, 17px 17px 0px #65504d, 18px 18px 0px #65504d, 19px 19px 0px #65504d, 20px 20px 0px #65504d, 21px 21px 0px #65504d, 22px 22px 0px #65504d, 23px 23px 0px #65504d, 24px 24px 0px #65504d, 25px 25px 0px #65504d, 26px 26px 0px #65504d, 27px 27px 0px #65504d, 28px 28px 0px #65504d, 29px 29px 0px #65504d;
    width: 100%;
    height: 130px;
}
.front3 {
    -moz-transform: translateZ(65px);
    -ms-transform: translateZ(65px);
    -o-transform: translateZ(65px);
    -webkit-transform: translateZ(65px);
    transform: translateZ(65px);
    background-color: #bcac9c;
}
.back3 {
    -moz-transform: translateZ(-65px);
    -ms-transform: translateZ(-65px);
    -o-transform: translateZ(-65px);
    -webkit-transform: translateZ(-65px);
    transform: translateZ(-65px);
    background-color: #d0bcac;
}
.left3 {
    -moz-transform: rotatey(-90deg) translatez(65px);
    -ms-transform: rotatey(-90deg) translatez(65px);
    -o-transform: rotatey(-90deg) translatez(65px);
    -webkit-transform: rotatey(-90deg) translatez(65px);
    transform: rotatey(-90deg) translatez(65px);
    background-color: #d0bcac;
}
.right3 {
    -moz-transform: rotatey(-90deg) translatez(-65px);
    -ms-transform: rotatey(-90deg) translatez(-65px);
    -o-transform: rotatey(-90deg) translatez(-65px);
    -webkit-transform: rotatey(-90deg) translatez(65px);
    transform: rotatey(-90deg) translatez(-65px);
    background-color: #bcac9c;
}
.keyboard {
    z-index: 0;
    width: 80px;
    height: 20px;
    position: absolute;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -o-transform-origin: center center;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -moz-transform: translatey(170px) translatex(-120px);
    -ms-transform: translatey(170px) translatex(-120px);
    -o-transform: translatey(170px) translatex(-120px);
    -webkit-transform: translatey(170px) translatex(-120px);
    transform: translatey(170px) translatex(-120px);
}
.front4 {
    -moz-transform: translateZ(75px);
    -ms-transform: translateZ(75px);
    -o-transform: translateZ(75px);
    -webkit-transform: translateZ(75px);
    transform: translateZ(75px);
    background-color: #c6b5a4;
}
.back4 {
    -moz-transform: translateZ(-75px);
    -ms-transform: translateZ(-75px);
    -o-transform: translateZ(-75px);
    -webkit-transform: translateZ(-75px);
    transform: translateZ(-75px);
    background-color: #dbc6b5;
}
.bottom4 {
    -moz-transform: rotatex(90deg) translatez(55px);
    -ms-transform: rotatex(90deg) translatez(55px);
    -o-transform: rotatex(90deg) translatez(55px);
    -webkit-transform: rotatex(90deg) translatez(55px);
    transform: rotatex(90deg) translatez(55px);
    background-color: #65504d;
    box-shadow: 1px 1px 0px #65504d, 2px 2px 0px #65504d, 3px 3px 0px #65504d, 4px 4px 0px #65504d, 5px 5px 0px #65504d, 6px 6px 0px #65504d, 7px 7px 0px #65504d, 8px 8px 0px #65504d, 9px 9px 0px #65504d, 10px 10px 0px #65504d;
    width: 100%;
    height: 150px;
}
.top4 {
    -moz-transform: rotatex(90deg) translatez(75px);
    -ms-transform: rotatex(90deg) translatez(75px);
    -o-transform: rotatex(90deg) translatez(75px);
    -webkit-transform: rotatex(90deg) translatez(75px);
    transform: rotatex(90deg) translatez(75px);
    background-color: #eedec8;
    width: 100%;
    height: 150px;
}
.left4 {
    -moz-transform: rotatey(-90deg) translatez(75px);
    -ms-transform: rotatey(-90deg) translatez(75px);
    -o-transform: rotatey(-90deg) translatez(75px);
    -webkit-transform: rotatey(-90deg) translatez(75px);
    transform: rotatey(-90deg) translatez(75px);
    background-color: #dbc6b5;
    width: 150px;
}
.right4 {
    -moz-transform: rotatey(-90deg) translatez(-5px);
    -ms-transform: rotatey(-90deg) translatez(-5px);
    -o-transform: rotatey(-90deg) translatez(-5px);
    -webkit-transform: rotatey(-90deg) translatez(-5px);
    transform: rotatey(-90deg) translatez(-5px);
    background-color: #c6b5a4;
    width: 150px;
}
.keyboardkeys {
    z-index: 0;
    width: 60px;
    height: 10px;
    position: absolute;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -o-transform-origin: center center;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -moz-transform: translatey(160px) translatex(-110px) translatez(-20px);
    ;
    -ms-transform: translatey(160px) translatex(-110px) translatez(-20px);
    ;
    -o-transform: translatey(160px) translatex(-110px) translatez(-20px);
    ;
    -webkit-transform: translatey(160px) translatex(-110px) translatez(-20px);
    ;
    transform: translatey(160px) translatex(-110px) translatez(-20px);
}
.bottom5 {
    -moz-transform: rotatex(90deg) translatez(30px);
    -ms-transform: rotatex(90deg) translatez(30px);
    -o-transform: rotatex(90deg) translatez(30px);
    -webkit-transform: rotatex(90deg) translatez(30px);
    transform: rotatex(90deg) translatez(30px);
    background-color: transparent;
    box-shadow: 1px 1px 0px #b4a998, 2px 2px 0px #b4a998, 3px 3px 0px #b4a998, 4px 4px 0px #b4a998, 5px 5px 0px #b4a998;
    width: 100%;
    height: 80px;
}
.front5 {
    -moz-transform: translateZ(40px);
    -ms-transform: translateZ(40px);
    -o-transform: translateZ(40px);
    -webkit-transform: translateZ(40px);
    transform: translateZ(40px);
    background-color: #454545;
}
.back5 {
    -moz-transform: translateZ(-40px);
    -ms-transform: translateZ(-40px);
    -o-transform: translateZ(-40px);
    -webkit-transform: translateZ(-40px);
    transform: translateZ(-40px);
    background-color: #4d4d4d;
}
.top5 {
    -moz-transform: rotatex(90deg) translatez(40px);
    -ms-transform: rotatex(90deg) translatez(40px);
    -o-transform: rotatex(90deg) translatez(40px);
    -webkit-transform: rotatex(90deg) translatez(40px);
    transform: rotatex(90deg) translatez(40px);
    background-color: #565656;
    width: 100%;
    height: 80px;
}
.left5 {
    -moz-transform: rotatey(-90deg) translatez(40px);
    -ms-transform: rotatey(-90deg) translatez(40px);
    -o-transform: rotatey(-90deg) translatez(40px);
    -webkit-transform: rotatey(-90deg) translatez(40px);
    transform: rotatey(-90deg) translatez(40px);
    background-color: #4d4d4d;
    width: 80px;
}
.right5 {
    -moz-transform: rotatey(-90deg) translatez(-20px);
    -ms-transform: rotatey(-90deg) translatez(-20px);
    -o-transform: rotatey(-90deg) translatez(-20px);
    -webkit-transform: rotatey(-90deg) translatez(-20px);
    transform: rotatey(-90deg) translatez(-20px);
    background-color: #454545;
    width: 80px;
}
.numpad {
    z-index: 0;
    width: 60px;
    height: 10px;
    position: absolute;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -o-transform-origin: center center;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -moz-transform: translatey(160px) translatex(-110px) translatez(45px);
    -ms-transform: translatey(160px) translatex(-110px) translatez(45px);
    -o-transform: translatey(160px) translatex(-110px) translatez(45px);
    -webkit-transform: translatey(160px) translatex(-110px) translatez(45px);
    transform: translatey(160px) translatex(-110px) translatez(45px);
}
.bottom6 {
    -moz-transform: rotatex(90deg) translatez(5px);
    -ms-transform: rotatex(90deg) translatez(5px);
    -o-transform: rotatex(90deg) translatez(5px);
    -webkit-transform: rotatex(90deg) translatez(5px);
    transform: rotatex(90deg) translatez(5px);
    background-color: transparent;
    box-shadow: 1px 1px 0px #b4a998, 2px 2px 0px #b4a998, 3px 3px 0px #b4a998, 4px 4px 0px #b4a998, 5px 5px 0px #b4a998;
    width: 100%;
    height: 30px;
}
.front6 {
    -moz-transform: translateZ(15px);
    -ms-transform: translateZ(15px);
    -o-transform: translateZ(15px);
    -webkit-transform: translateZ(15px);
    transform: translateZ(15px);
    background-color: #454545;
}
.back6 {
    -moz-transform: translateZ(-15px);
    -ms-transform: translateZ(-15px);
    -o-transform: translateZ(-15px);
    -webkit-transform: translateZ(-15px);
    transform: translateZ(-15px);
    background-color: #4d4d4d;
}
.top6 {
    -moz-transform: rotatex(90deg) translatez(15px);
    -ms-transform: rotatex(90deg) translatez(15px);
    -o-transform: rotatex(90deg) translatez(15px);
    -webkit-transform: rotatex(90deg) translatez(15px);
    transform: rotatex(90deg) translatez(15px);
    background-color: #565656;
    width: 100%;
    height: 30px;
}
.left6 {
    -moz-transform: rotatey(-90deg) translatez(15px);
    -ms-transform: rotatey(-90deg) translatez(15px);
    -o-transform: rotatey(-90deg) translatez(15px);
    -webkit-transform: rotatey(-90deg) translatez(15px);
    transform: rotatey(-90deg) translatez(15px);
    background-color: #4d4d4d;
    width: 30px;
}
.right6 {
    -moz-transform: rotatey(-90deg) translatez(-45px);
    -ms-transform: rotatey(-90deg) translatez(-45px);
    -o-transform: rotatey(-90deg) translatez(-45px);
    -webkit-transform: rotatey(-90deg) translatez(-45px);
    transform: rotatey(-90deg) translatez(-45px);
    background-color: #454545;
    width: 30px;
}
.brownpart {
    position: absolute;
    width: 130px;
    left: 10px;
    top: 10px;
    height: 20px;
    background-color: #9e7063;
}
.disc {
    position: absolute;
    width: 30px;
    left: 10px;
    top: calc(50% - 2.5px);
    height: 5px;
    background-color: #282828;
}
.ui {
    position: absolute;
    left: calc(50% - 250px);
    top: calc(50% - 200px);
    z-index: 9999;
    width: 500px;
    height: 400px;
}
#rotatex {
    position: absolute;
    right: -150px;
    top: 50%;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}
#rotatey {
    position: absolute;
    left: calc(50% - 150px);
}
input[type="range"] {
    -webkit-appearance: none;
    cursor: pointer;
    width: 300px;
    background-color: rgba(255, 255, 255, 0.2);
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    background-color: #565656;
}

HTML

3D computer Html+CSS with rotating controls

h5,css,computer,rotate

编辑器支持Emmet

快捷键

3D computer Html+CSS with rotating controls

h5,css,computer,rotate

使用HTML5 CSS3制作伪三维全息图片（有深度感）

使用纯HTML5 CSS3实现任天堂城市赛车游戏模仿

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：