Difference between revisions of "Team:Warwick/test2"
(Created page with "<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 - peri...") |
|||
Line 103: | Line 103: | ||
<script src="js/renderers/CSS3DRenderer.js"></script> | <script src="js/renderers/CSS3DRenderer.js"></script> | ||
− | + | <div id="container"><div style="overflow: hidden; transform-style: preserve-3d; width: 386px; height: 951px; position: absolute; perspective: 1306.42551295067px;"><div style="transform-style: preserve-3d; width: 386px; height: 951px; transform: translate3d(0px, 0px, 1306.42551295067px) matrix3d(0.946411192417145, -0.0265868697315455, 0.321867823600769, 0, -0.105564095079899, -0.967330574989319, 0.230494439601898, 0, -0.305224537849426, 0.252120226621628, 0.91829913854599, 0, 0.000006159265012684, -0.000001852444256655, -3915.2138671875, 0.999999940395355) translate3d(193px, 475.5px, 0px);"><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -1190, 810, 0, 1); background-color: rgba(0, 127, 127, 0.733333);"><div class="number">1</div><div class="symbol">H</div><div class="details">Hydrogen<br>1.00794</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 1190, 810, 0, 1); background-color: rgba(0, 127, 127, 0.266667);"><div class="number">2</div><div class="symbol">He</div><div class="details">Helium<br>4.002602</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -1190, 630, 0, 1); background-color: rgba(0, 127, 127, 0.254902);"><div class="number">3</div><div class="symbol">Li</div><div class="details">Lithium<br>6.941</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -1050, 630, 0, 1); background-color: rgba(0, 127, 127, 0.607843);"><div class="number">4</div><div class="symbol">Be</div><div class="details">Beryllium<br>9.012182</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 490, 630, 0, 1); background-color: rgba(0, 127, 127, 0.564706);"><div class="number">5</div><div class="symbol">B</div><div class="details">Boron<br>10.811</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 630, 630, 0, 1); background-color: rgba(0, 127, 127, 0.313726);"><div class="number">6</div><div class="symbol">C</div><div class="details">Carbon<br>12.0107</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 770, 630, 0, 1); background-color: rgba(0, 127, 127, 0.341176);"><div class="number">7</div><div class="symbol">N</div><div class="details">Nitrogen<br>14.0067</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 910, 630, 0, 1); background-color: rgba(0, 127, 127, 0.517647);"><div class="number">8</div><div class="symbol">O</div><div class="details">Oxygen<br>15.9994</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 1050, 630, 0, 1); background-color: rgba(0, 127, 127, 0.592157);"><div class="number">9</div><div class="symbol">F</div><div class="details">Fluorine<br>18.9984032</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 1190, 630, 0, 1); background-color: rgba(0, 127, 127, 0.392157);"><div class="number">10</div><div class="symbol">Ne</div><div class="details">Neon<br>20.1797</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -1190, 450, 0, 1); background-color: rgba(0, 127, 127, 0.576471);"><div class="number">11</div><div class="symbol">Na</div><div class="details">Sodium<br>22.98976...</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -1050, 450, 0, 1); background-color: rgba(0, 127, 127, 0.568627);"><div class="number">12</div><div class="symbol">Mg</div><div class="details">Magnesium<br>24.305</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 490, 450, 0, 1); background-color: rgba(0, 127, 127, 0.619608);"><div class="number">13</div><div class="symbol">Al</div><div class="details">Aluminium<br>26.9815386</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 630, 450, 0, 1); background-color: rgba(0, 127, 127, 0.278431);"><div class="number">14</div><div class="symbol">Si</div><div class="details">Silicon<br>28.0855</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 770, 450, 0, 1); background-color: rgba(0, 127, 127, 0.713726);"><div class="number">15</div><div class="symbol">P</div><div class="details">Phosphorus<br>30.973762</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 910, 450, 0, 1); background-color: rgba(0, 127, 127, 0.592157);"><div class="number">16</div><div class="symbol">S</div><div class="details">Sulfur<br>32.065</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 1050, 450, 0, 1); background-color: rgba(0, 127, 127, 0.698039);"><div class="number">17</div><div class="symbol">Cl</div><div class="details">Chlorine<br>35.453</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 1190, 450, 0, 1); background-color: rgba(0, 127, 127, 0.462745);"><div class="number">18</div><div class="symbol">Ar</div><div class="details">Argon<br>39.948</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -1190, 270, 0, 1); background-color: rgba(0, 127, 127, 0.678431);"><div class="number">19</div><div class="symbol">K</div><div class="details">Potassium<br>39.948</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -1050, 270, 0, 1); background-color: rgba(0, 127, 127, 0.486275);"><div class="number">20</div><div class="symbol">Ca</div><div class="details">Calcium<br>40.078</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -910, 270, 0, 1); background-color: rgba(0, 127, 127, 0.713726);"><div class="number">21</div><div class="symbol">Sc</div><div class="details">Scandium<br>44.955912</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -770, 270, 0, 1); background-color: rgba(0, 127, 127, 0.427451);"><div class="number">22</div><div class="symbol">Ti</div><div class="details">Titanium<br>47.867</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -630, 270, 0, 1); background-color: rgba(0, 127, 127, 0.482353);"><div class="number">23</div><div class="symbol">V</div><div class="details">Vanadium<br>50.9415</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -490, 270, 0, 1); background-color: rgba(0, 127, 127, 0.290196);"><div class="number">24</div><div class="symbol">Cr</div><div class="details">Chromium<br>51.9961</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -350, 270, 0, 1); background-color: rgba(0, 127, 127, 0.580392);"><div class="number">25</div><div class="symbol">Mn</div><div class="details">Manganese<br>54.938045</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -210, 270, 0, 1); background-color: rgba(0, 127, 127, 0.380392);"><div class="number">26</div><div class="symbol">Fe</div><div class="details">Iron<br>55.845</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -70, 270, 0, 1); background-color: rgba(0, 127, 127, 0.415686);"><div class="number">27</div><div class="symbol">Co</div><div class="details">Cobalt<br>58.933195</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 70, 270, 0, 1); background-color: rgba(0, 127, 127, 0.45098);"><div class="number">28</div><div class="symbol">Ni</div><div class="details">Nickel<br>58.6934</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 210, 270, 0, 1); background-color: rgba(0, 127, 127, 0.647059);"><div class="number">29</div><div class="symbol">Cu</div><div class="details">Copper<br>63.546</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 350, 270, 0, 1); background-color: rgba(0, 127, 127, 0.458824);"><div class="number">30</div><div class="symbol">Zn</div><div class="details">Zinc<br>65.38</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 490, 270, 0, 1); background-color: rgba(0, 127, 127, 0.564706);"><div class="number">31</div><div class="symbol">Ga</div><div class="details">Gallium<br>69.723</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 630, 270, 0, 1); background-color: rgba(0, 127, 127, 0.717647);"><div class="number">32</div><div class="symbol">Ge</div><div class="details">Germanium<br>72.63</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 770, 270, 0, 1); background-color: rgba(0, 127, 127, 0.513726);"><div class="number">33</div><div class="symbol">As</div><div class="details">Arsenic<br>74.9216</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 910, 270, 0, 1); background-color: rgba(0, 127, 127, 0.654902);"><div class="number">34</div><div class="symbol">Se</div><div class="details">Selenium<br>78.96</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 1050, 270, 0, 1); background-color: rgba(0, 127, 127, 0.447059);"><div class="number">35</div><div class="symbol">Br</div><div class="details">Bromine<br>79.904</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 1190, 270, 0, 1); background-color: rgba(0, 127, 127, 0.564706);"><div class="number">36</div><div class="symbol">Kr</div><div class="details">Krypton<br>83.798</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -1190, 90, 0, 1); background-color: rgba(0, 127, 127, 0.407843);"><div class="number">37</div><div class="symbol">Rb</div><div class="details">Rubidium<br>85.4678</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -1050, 90, 0, 1); background-color: rgba(0, 127, 127, 0.266667);"><div class="number">38</div><div class="symbol">Sr</div><div class="details">Strontium<br>87.62</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -910, 90, 0, 1); background-color: rgba(0, 127, 127, 0.454902);"><div class="number">39</div><div class="symbol">Y</div><div class="details">Yttrium<br>88.90585</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -770, 90, 0, 1); background-color: rgba(0, 127, 127, 0.360784);"><div class="number">40</div><div class="symbol">Zr</div><div class="details">Zirconium<br>91.224</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -630, 90, 0, 1); background-color: rgba(0, 127, 127, 0.521569);"><div class="number">41</div><div class="symbol">Nb</div><div class="details">Niobium<br>92.90628</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -490, 90, 0, 1); background-color: rgba(0, 127, 127, 0.643137);"><div class="number">42</div><div class="symbol">Mo</div><div class="details">Molybdenum<br>95.96</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -350, 90, 0, 1); background-color: rgba(0, 127, 127, 0.337255);"><div class="number">43</div><div class="symbol">Tc</div><div class="details">Technetium<br>(98)</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -210, 90, 0, 1); background-color: rgba(0, 127, 127, 0.670588);"><div class="number">44</div><div class="symbol">Ru</div><div class="details">Ruthenium<br>101.07</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -70, 90, 0, 1); background-color: rgba(0, 127, 127, 0.52549);"><div class="number">45</div><div class="symbol">Rh</div><div class="details">Rhodium<br>102.9055</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 70, 90, 0, 1); background-color: rgba(0, 127, 127, 0.529412);"><div class="number">46</div><div class="symbol">Pd</div><div class="details">Palladium<br>106.42</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 210, 90, 0, 1); background-color: rgba(0, 127, 127, 0.6);"><div class="number">47</div><div class="symbol">Ag</div><div class="details">Silver<br>107.8682</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 350, 90, 0, 1); background-color: rgba(0, 127, 127, 0.545098);"><div class="number">48</div><div class="symbol">Cd</div><div class="details">Cadmium<br>112.411</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 490, 90, 0, 1); background-color: rgba(0, 127, 127, 0.662745);"><div class="number">49</div><div class="symbol">In</div><div class="details">Indium<br>114.818</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 630, 90, 0, 1); background-color: rgba(0, 127, 127, 0.576471);"><div class="number">50</div><div class="symbol">Sn</div><div class="details">Tin<br>118.71</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 770, 90, 0, 1); background-color: rgba(0, 127, 127, 0.54902);"><div class="number">51</div><div class="symbol">Sb</div><div class="details">Antimony<br>121.76</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 910, 90, 0, 1); background-color: rgba(0, 127, 127, 0.509804);"><div class="number">52</div><div class="symbol">Te</div><div class="details">Tellurium<br>127.6</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 1050, 90, 0, 1); background-color: rgba(0, 127, 127, 0.4);"><div class="number">53</div><div class="symbol">I</div><div class="details">Iodine<br>126.90447</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 1190, 90, 0, 1); background-color: rgba(0, 127, 127, 0.592157);"><div class="number">54</div><div class="symbol">Xe</div><div class="details">Xenon<br>131.293</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -1190, -90, 0, 1); background-color: rgba(0, 127, 127, 0.541176);"><div class="number">55</div><div class="symbol">Cs</div><div class="details">Caesium<br>132.9054</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -1050, -90, 0, 1); background-color: rgba(0, 127, 127, 0.396078);"><div class="number">56</div><div class="symbol">Ba</div><div class="details">Barium<br>132.9054</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -770, -630, 0, 1); background-color: rgba(0, 127, 127, 0.611765);"><div class="number">57</div><div class="symbol">La</div><div class="details">Lanthanum<br>138.90547</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -630, -630, 0, 1); background-color: rgba(0, 127, 127, 0.34902);"><div class="number">58</div><div class="symbol">Ce</div><div class="details">Cerium<br>140.116</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -490, -630, 0, 1); background-color: rgba(0, 127, 127, 0.278431);"><div class="number">59</div><div class="symbol">Pr</div><div class="details">Praseodymium<br>140.90765</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -350, -630, 0, 1); background-color: rgba(0, 127, 127, 0.388235);"><div class="number">60</div><div class="symbol">Nd</div><div class="details">Neodymium<br>144.242</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -210, -630, 0, 1); background-color: rgba(0, 127, 127, 0.396078);"><div class="number">61</div><div class="symbol">Pm</div><div class="details">Promethium<br>(145)</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -70, -630, 0, 1); background-color: rgba(0, 127, 127, 0.278431);"><div class="number">62</div><div class="symbol">Sm</div><div class="details">Samarium<br>150.36</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 70, -630, 0, 1); background-color: rgba(0, 127, 127, 0.478431);"><div class="number">63</div><div class="symbol">Eu</div><div class="details">Europium<br>151.964</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 210, -630, 0, 1); background-color: rgba(0, 127, 127, 0.584314);"><div class="number">64</div><div class="symbol">Gd</div><div class="details">Gadolinium<br>157.25</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 350, -630, 0, 1); background-color: rgba(0, 127, 127, 0.317647);"><div class="number">65</div><div class="symbol">Tb</div><div class="details">Terbium<br>158.92535</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 490, -630, 0, 1); background-color: rgba(0, 127, 127, 0.623529);"><div class="number">66</div><div class="symbol">Dy</div><div class="details">Dysprosium<br>162.5</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 630, -630, 0, 1); background-color: rgba(0, 127, 127, 0.447059);"><div class="number">67</div><div class="symbol">Ho</div><div class="details">Holmium<br>164.93032</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 770, -630, 0, 1); background-color: rgba(0, 127, 127, 0.392157);"><div class="number">68</div><div class="symbol">Er</div><div class="details">Erbium<br>167.259</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 910, -630, 0, 1); background-color: rgba(0, 127, 127, 0.521569);"><div class="number">69</div><div class="symbol">Tm</div><div class="details">Thulium<br>168.93421</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 1050, -630, 0, 1); background-color: rgba(0, 127, 127, 0.737255);"><div class="number">70</div><div class="symbol">Yb</div><div class="details">Ytterbium<br>173.054</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 1190, -630, 0, 1); background-color: rgba(0, 127, 127, 0.458824);"><div class="number">71</div><div class="symbol">Lu</div><div class="details">Lutetium<br>174.9668</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -770, -90, 0, 1); background-color: rgba(0, 127, 127, 0.482353);"><div class="number">72</div><div class="symbol">Hf</div><div class="details">Hafnium<br>178.49</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -630, -90, 0, 1); background-color: rgba(0, 127, 127, 0.360784);"><div class="number">73</div><div class="symbol">Ta</div><div class="details">Tantalum<br>180.94788</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -490, -90, 0, 1); background-color: rgba(0, 127, 127, 0.32549);"><div class="number">74</div><div class="symbol">W</div><div class="details">Tungsten<br>183.84</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -350, -90, 0, 1); background-color: rgba(0, 127, 127, 0.32549);"><div class="number">75</div><div class="symbol">Re</div><div class="details">Rhenium<br>186.207</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -210, -90, 0, 1); background-color: rgba(0, 127, 127, 0.623529);"><div class="number">76</div><div class="symbol">Os</div><div class="details">Osmium<br>190.23</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -70, -90, 0, 1); background-color: rgba(0, 127, 127, 0.309804);"><div class="number">77</div><div class="symbol">Ir</div><div class="details">Iridium<br>192.217</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 70, -90, 0, 1); background-color: rgba(0, 127, 127, 0.462745);"><div class="number">78</div><div class="symbol">Pt</div><div class="details">Platinum<br>195.084</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 210, -90, 0, 1); background-color: rgba(0, 127, 127, 0.254902);"><div class="number">79</div><div class="symbol">Au</div><div class="details">Gold<br>196.966569</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 350, -90, 0, 1); background-color: rgba(0, 127, 127, 0.639216);"><div class="number">80</div><div class="symbol">Hg</div><div class="details">Mercury<br>200.59</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 490, -90, 0, 1); background-color: rgba(0, 127, 127, 0.647059);"><div class="number">81</div><div class="symbol">Tl</div><div class="details">Thallium<br>204.3833</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 630, -90, 0, 1); background-color: rgba(0, 127, 127, 0.427451);"><div class="number">82</div><div class="symbol">Pb</div><div class="details">Lead<br>207.2</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 770, -90, 0, 1); background-color: rgba(0, 127, 127, 0.501961);"><div class="number">83</div><div class="symbol">Bi</div><div class="details">Bismuth<br>208.9804</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 910, -90, 0, 1); background-color: rgba(0, 127, 127, 0.619608);"><div class="number">84</div><div class="symbol">Po</div><div class="details">Polonium<br>(209)</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 1050, -90, 0, 1); background-color: rgba(0, 127, 127, 0.588235);"><div class="number">85</div><div class="symbol">At</div><div class="details">Astatine<br>(210)</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 1190, -90, 0, 1); background-color: rgba(0, 127, 127, 0.486275);"><div class="number">86</div><div class="symbol">Rn</div><div class="details">Radon<br>(222)</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -1190, -270, 0, 1); background-color: rgba(0, 127, 127, 0.352941);"><div class="number">87</div><div class="symbol">Fr</div><div class="details">Francium<br>(223)</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -1050, -270, 0, 1); background-color: rgba(0, 127, 127, 0.741176);"><div class="number">88</div><div class="symbol">Ra</div><div class="details">Radium<br>(226)</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -770, -810, 0, 1); background-color: rgba(0, 127, 127, 0.541176);"><div class="number">89</div><div class="symbol">Ac</div><div class="details">Actinium<br>(227)</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -630, -810, 0, 1); background-color: rgba(0, 127, 127, 0.737255);"><div class="number">90</div><div class="symbol">Th</div><div class="details">Thorium<br>232.03806</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -490, -810, 0, 1); background-color: rgba(0, 127, 127, 0.282353);"><div class="number">91</div><div class="symbol">Pa</div><div class="details">Protactinium<br>231.0588</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -350, -810, 0, 1); background-color: rgba(0, 127, 127, 0.427451);"><div class="number">92</div><div class="symbol">U</div><div class="details">Uranium<br>238.02891</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -210, -810, 0, 1); background-color: rgba(0, 127, 127, 0.470588);"><div class="number">93</div><div class="symbol">Np</div><div class="details">Neptunium<br>(237)</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -70, -810, 0, 1); background-color: rgba(0, 127, 127, 0.729412);"><div class="number">94</div><div class="symbol">Pu</div><div class="details">Plutonium<br>(244)</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 70, -810, 0, 1); background-color: rgba(0, 127, 127, 0.392157);"><div class="number">95</div><div class="symbol">Am</div><div class="details">Americium<br>(243)</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 210, -810, 0, 1); background-color: rgba(0, 127, 127, 0.74902);"><div class="number">96</div><div class="symbol">Cm</div><div class="details">Curium<br>(247)</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 350, -810, 0, 1); background-color: rgba(0, 127, 127, 0.619608);"><div class="number">97</div><div class="symbol">Bk</div><div class="details">Berkelium<br>(247)</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 490, -810, 0, 1); background-color: rgba(0, 127, 127, 0.517647);"><div class="number">98</div><div class="symbol">Cf</div><div class="details">Californium<br>(251)</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 630, -810, 0, 1); background-color: rgba(0, 127, 127, 0.45098);"><div class="number">99</div><div class="symbol">Es</div><div class="details">Einstenium<br>(252)</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 770, -810, 0, 1); background-color: rgba(0, 127, 127, 0.380392);"><div class="number">100</div><div class="symbol">Fm</div><div class="details">Fermium<br>(257)</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 910, -810, 0, 1); background-color: rgba(0, 127, 127, 0.258824);"><div class="number">101</div><div class="symbol">Md</div><div class="details">Mendelevium<br>(258)</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 1050, -810, 0, 1); background-color: rgba(0, 127, 127, 0.639216);"><div class="number">102</div><div class="symbol">No</div><div class="details">Nobelium<br>(259)</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 1190, -810, 0, 1); background-color: rgba(0, 127, 127, 0.52549);"><div class="number">103</div><div class="symbol">Lr</div><div class="details">Lawrencium<br>(262)</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -770, -270, 0, 1); background-color: rgba(0, 127, 127, 0.54902);"><div class="number">104</div><div class="symbol">Rf</div><div class="details">Rutherfordium<br>(267)</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -630, -270, 0, 1); background-color: rgba(0, 127, 127, 0.396078);"><div class="number">105</div><div class="symbol">Db</div><div class="details">Dubnium<br>(268)</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -490, -270, 0, 1); background-color: rgba(0, 127, 127, 0.592157);"><div class="number">106</div><div class="symbol">Sg</div><div class="details">Seaborgium<br>(271)</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -350, -270, 0, 1); background-color: rgba(0, 127, 127, 0.686275);"><div class="number">107</div><div class="symbol">Bh</div><div class="details">Bohrium<br>(272)</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -210, -270, 0, 1); background-color: rgba(0, 127, 127, 0.745098);"><div class="number">108</div><div class="symbol">Hs</div><div class="details">Hassium<br>(270)</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -70, -270, 0, 1); background-color: rgba(0, 127, 127, 0.419608);"><div class="number">109</div><div class="symbol">Mt</div><div class="details">Meitnerium<br>(276)</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 70, -270, 0, 1); background-color: rgba(0, 127, 127, 0.482353);"><div class="number">110</div><div class="symbol">Ds</div><div class="details">Darmstadium<br>(281)</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 210, -270, 0, 1); background-color: rgba(0, 127, 127, 0.439216);"><div class="number">111</div><div class="symbol">Rg</div><div class="details">Roentgenium<br>(280)</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 350, -270, 0, 1); background-color: rgba(0, 127, 127, 0.384314);"><div class="number">112</div><div class="symbol">Cn</div><div class="details">Copernicium<br>(285)</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 490, -270, 0, 1); background-color: rgba(0, 127, 127, 0.388235);"><div class="number">113</div><div class="symbol">Uut</div><div class="details">Unutrium<br>(284)</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 630, -270, 0, 1); background-color: rgba(0, 127, 127, 0.45098);"><div class="number">114</div><div class="symbol">Fl</div><div class="details">Flerovium<br>(289)</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 770, -270, 0, 1); background-color: rgba(0, 127, 127, 0.301961);"><div class="number">115</div><div class="symbol">Uup</div><div class="details">Ununpentium<br>(288)</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 910, -270, 0, 1); background-color: rgba(0, 127, 127, 0.290196);"><div class="number">116</div><div class="symbol">Lv</div><div class="details">Livermorium<br>(293)</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 1050, -270, 0, 1); background-color: rgba(0, 127, 127, 0.690196);"><div class="number">117</div><div class="symbol">Uus</div><div class="details">Ununseptium<br>(294)</div></div><div class="element" style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 1190, -270, 0, 1); background-color: rgba(0, 127, 127, 0.337255);"><div class="number">118</div><div class="symbol">Uuo</div><div class="details">Ununoctium<br>(294)</div></div></div></div></div> | |
<div id="info"><a href="http://threejs.org" target="_blank">three.js css3d</a> - periodic table. <a href="https://plus.google.com/113862800338869870683/posts/QcFk5HrWran" target="_blank">info</a>.</div> | <div id="info"><a href="http://threejs.org" target="_blank">three.js css3d</a> - periodic table. <a href="https://plus.google.com/113862800338869870683/posts/QcFk5HrWran" target="_blank">info</a>.</div> | ||
<div id="menu"> | <div id="menu"> |
Revision as of 12:09, 31 July 2015
three.js css3d - periodic table. info.