<!doctype html>
<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title>three.js css3d - periodic table</title>
<style>
html, body {
height: 100%;
}
body {
background-color: #000000;
margin: 0;
font-family: Arial;
overflow: hidden;
}
a {
color: #ffffff;
}
#info {
position: absolute;
width: 100%;
color: #ffffff;
padding: 5px;
font-family: Monospace;
font-size: 13px;
font-weight: bold;
text-align: center;
z-index: 1;
}
#menu {
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
}
.element {
width: 140px;
height: 180px;
box-shadow: 0px 0px 20px rgba(0,255,255,0.5);
border: 1px solid rgba(127,255,255,0.25);
cursor: default;
}
.element:hover {
box-shadow: 0px 0px 20px rgba(0,255,255,0.75);
border: 1px solid rgba(127,255,255,0.75);
}
.element .number {
position: absolute;
top: 20px;
right: 20px;
font-size: 20px;
color: rgba(127,255,255,0.75);
}
.element .symbol {
position: absolute;
top: 40px;
width: 100%;
font-size: 70px;
text-align: center;
color: rgba(255,255,255,0.75);
font-weight: bold;
-webkit-filter: drop-shadow(0px 0px 20px rgba(0,255,255,0.95));
-moz-filter: drop-shadow(0px 0px 20px rgba(0,255,255,0.95));
-o-filter: drop-shadow(0px 0px 20px rgba(0,255,255,0.95));
-ms-filter: drop-shadow(0px 0px 20px rgba(0,255,255,0.95));
filter: drop-shadow(0px 0px 20px rgba(0,255,255,0.95));
}
.element .details {
position: absolute;
top: 125px;
width: 100%;
font-size: 18px;
text-align: center;
color: rgba(127,255,255,0.75);
}
button {
color: rgba(127,255,255,0.75);
background: transparent;
outline: 1px solid rgba(127,255,255,0.75);
border: 0px;
padding: 5px 10px;
cursor: pointer;
}
button:hover {
background-color: rgba(0,255,255,0.5);
}
button:active {
color: #000000;
background-color: rgba(0,255,255,0.75);
}
</style>
</head>
<body youdao="bind">
<script src="three.min.js"></script>
<script src="tween.min.js"></script>
<script src="TrackballControls.js"></script>
<script src="CSS3DRenderer.js"></script>
<div id="container"><div style="display:none;overflow: hidden; -webkit-transform-style: preserve-3d; -webkit-perspective-origin-x: 50%; -webkit-perspective-origin-y: 50%; width: 1280px; height: 320px; position: absolute; -webkit-perspective: 413.12244319066224px;"><div style="-webkit-transform-style: preserve-3d; width: 1280px; height: 320px; -webkit-transform: translate3d(0px, 0px, 413.12244319066224px) matrix3d(-0.9968612790107727, -0.07797463238239288, 0.013693835586309433, 0, 0.07722374051809311, -0.9196252226829529, 0.38513100147247314, 0, 0.017437251284718513, -0.3849796950817108, -0.9227602481842041, 0, 0, -0.0000048539791350776795, -1856.7379150390625, 1) translate3d(640px, 317px, 0px);"><div class="element" style="background-color: rgba(0, 127, 127, 0.654902); position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -1380, 900, 0, 1);"><div class="number">1</div><div class="symbol">H</div><div class="details">Hydrogen<br>1.00794</div></div><div class="element" style="background-color: rgba(0, 127, 127, 0.713726); position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 1340, 900, 0, 1);"><div class="number">2</div><div class="symbol">He</div><div class="details">Helium<br>4.002602</div></div><div class="element" style="background-color: rgba(0, 127, 127, 0.705882); position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -1380, 700, 0, 1);"><div class="number">3</div><div class="symbol">Li</div><div class="details">Lithium<br>6.941</div></div><div class="element" style="background-color: rgba(0, 127, 127, 0.513726); position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -1220, 700, 0, 1);"><div class="number">4</div><div class="symbol">Be</div><div class="details">Beryllium<br>9.012182</div></div><div class="element" style="background-color: rgba(0, 127, 127, 0.529412); position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 540, 700, 0, 1);"><div class="number">5</div><div class="symbol">B</div><div class="details">Boron<br>10.811</div></div><div class="element" style="background-color: rgba(0, 127, 127, 0.337255); position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 700, 700, 0, 1);"><div class="number">6</div><div class="symbol">C</div><div class="details">Carbon<br>12.0107</div></div><div class="element" style="background-color: rgba(0, 127, 127, 0.576471); position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 860, 700, 0, 1);"><div class="number">7</div><div class="symbol">N</div><div class="details">Nitrogen<br>14.0067</div></div><div class="element" style="background-color: rgba(0, 127, 127, 0.560784); position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 1020, 700, 0, 1);"><div class="number">8</div><div class="symbol">O</div><div class="details">Oxygen<br>15.9994</div></div><div class="element" style="background-color: rgba(0, 127, 127, 0.278431); position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 1180, 700, 0, 1);"><div class="number">9</div><div class="symbol">F</div><div class="details">Fluorine<br>18.9984032</div></div><div class="element" style="background-color: rgba(0, 127, 127, 0.690196); position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 1340, 700, 0, 1);"><div class="number">10</div><div class="symbol">Ne</div><div class="details">Neon<br>20.1797</div></div><div class="element" style="background-color: rgba(0, 127, 127, 0.541176); position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -1380, 500, 0, 1);"><div class="number">11</div><div class="symbol">Na</div><div class="details">Sodium<br>22.98976...</div></div><div class="element" style="background-color: rgba(0, 127, 127, 0.745098); position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -1220, 500, 0, 1);"><div class="number">12</div><div class="symbol">Mg</div><div class="details">Magnesium<br>24.305</div></div><div class="element" style="background-color: rgba(0, 127, 127, 0.286275); position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 540, 500, 0, 1);"><div class="number">13</div><div class="symbol">Al</div><div class="details">Aluminium<br>26.9815386</div></div><div class="element" style="background-color: rgba(0, 127, 127, 0.705882); position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 700, 500, 0, 1);"><div class="number">14</div><div class="symbol">Si</div><div
评论0