Cable 12 mars 2019 by ART to ACT Publications Memoire Contact Case Model > Cable(#43134) Architecture, Artefacts 15:19, 12 mars 2019 Architecture, Artefacts +Pro Pro Pro+ C EDIT Download image Visuel Texte <style type="text/css">/* /!\ You need to add vendor prefixes in order to render the CSS properly (or simply use http://leaverou.github.io/prefixfree/) /!\ */ #tridiv { perspective: 800px; position: absolute; overflow: hidden; width: 100%; height: 100%; background: transparent; font-size: 50%; } .face { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.42); } .scene, .shape, .face, .face-wrapper, .cr { position: absolute; transform-style: preserve-3d; } .scene { width: 80em; height: 80em; top: 50%; left: 50%; margin: -40em 0 0 -40em; } .shape { top: 50%; left: 50%; width: 0; height: 0; transform-origin: 50%; } .face, .face-wrapper { overflow: hidden; transform-origin: 0 0; backface-visibility: hidden; /* hidden by default, prevent blinking and other weird rendering glitchs */ } .face { background-size: 100% 100%!important; background-position: center; } .face-wrapper .face { left: 100%; width: 100%; height: 100% } .photon-shader { position: absolute; left: 0; top: 0; width: 100%; height: 100% } .side { left: 50%; } .cr, .cr .side { height: 100%; } [class*="cylinder"] .tp { transform: rotateX(90deg) translateY(-50%); } [class*="cylinder"] .bm { transform: rotateX(-90deg) translateY(-50%); } [class*="cylinder"] .tp, [class*="cylinder"] .bm, [class*="cylinder"] .tp .photon-shader, [class*="cylinder"] .bm .photon-shader { border-radius: 50%; } [class*="cylinder"] .bm { top: 100%; } /* .cyl-1 styles */ .cyl-1 { transform:translate3D(1.25em, 13.625em, 0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); opacity:1; width:30.75em; height:4.5em; margin:-2.25em 0 0 -15.375em; } .cyl-1 .tp, .cyl-1 .bm { width:30.75em; height:30.75em; } .cyl-1 .side { width:7.043486837497111em; height:4.5em; } .cyl-1 .s0 { transform: rotateY(12.857142857142858deg) translate3D(-50%, 0, 15.35em); } .cyl-1 .s1 { transform: rotateY(38.57142857142857deg) translate3D(-50%, 0, 15.35em); } .cyl-1 .s2 { transform: rotateY(64.28571428571429deg) translate3D(-50%, 0, 15.35em); } .cyl-1 .s3 { transform: rotateY(90deg) translate3D(-50%, 0, 15.35em); } .cyl-1 .s4 { transform: rotateY(115.71428571428572deg) translate3D(-50%, 0, 15.35em); } .cyl-1 .s5 { transform: rotateY(141.42857142857144deg) translate3D(-50%, 0, 15.35em); } .cyl-1 .s6 { transform: rotateY(167.14285714285714deg) translate3D(-50%, 0, 15.35em); } .cyl-1 .s7 { transform: rotateY(192.85714285714286deg) translate3D(-50%, 0, 15.35em); } .cyl-1 .s8 { transform: rotateY(218.57142857142858deg) translate3D(-50%, 0, 15.35em); } .cyl-1 .s9 { transform: rotateY(244.2857142857143deg) translate3D(-50%, 0, 15.35em); } .cyl-1 .s10 { transform: rotateY(270deg) translate3D(-50%, 0, 15.35em); } .cyl-1 .s11 { transform: rotateY(295.7142857142857deg) translate3D(-50%, 0, 15.35em); } .cyl-1 .s12 { transform: rotateY(321.4285714285714deg) translate3D(-50%, 0, 15.35em); } .cyl-1 .s13 { transform: rotateY(347.1428571428571deg) translate3D(-50%, 0, 15.35em); } .cyl-1 .face, .cyl-1 .side { background-color:#ff411d; } /* .cyl-2 styles */ .cyl-2 { transform:translate3D(0.3125em, -1.875em, 0.0625em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); opacity:1; width:6em; height:34.5em; margin:-17.25em 0 0 -3em; } .cyl-2 .tp, .cyl-2 .bm { width:6em; height:6em; } .cyl-2 .side { width:1.3944608463408996em; height:34.5em; } .cyl-2 .s0 { transform: rotateY(12.857142857142858deg) translate3D(-50%, 0, 2.975em); } .cyl-2 .s1 { transform: rotateY(38.57142857142857deg) translate3D(-50%, 0, 2.975em); } .cyl-2 .s2 { transform: rotateY(64.28571428571429deg) translate3D(-50%, 0, 2.975em); } .cyl-2 .s3 { transform: rotateY(90deg) translate3D(-50%, 0, 2.975em); } .cyl-2 .s4 { transform: rotateY(115.71428571428572deg) translate3D(-50%, 0, 2.975em); } .cyl-2 .s5 { transform: rotateY(141.42857142857144deg) translate3D(-50%, 0, 2.975em); } .cyl-2 .s6 { transform: rotateY(167.14285714285714deg) translate3D(-50%, 0, 2.975em); } .cyl-2 .s7 { transform: rotateY(192.85714285714286deg) translate3D(-50%, 0, 2.975em); } .cyl-2 .s8 { transform: rotateY(218.57142857142858deg) translate3D(-50%, 0, 2.975em); } .cyl-2 .s9 { transform: rotateY(244.2857142857143deg) translate3D(-50%, 0, 2.975em); } .cyl-2 .s10 { transform: rotateY(270deg) translate3D(-50%, 0, 2.975em); } .cyl-2 .s11 { transform: rotateY(295.7142857142857deg) translate3D(-50%, 0, 2.975em); } .cyl-2 .s12 { transform: rotateY(321.4285714285714deg) translate3D(-50%, 0, 2.975em); } .cyl-2 .s13 { transform: rotateY(347.1428571428571deg) translate3D(-50%, 0, 2.975em); } .cyl-2 .face, .cyl-2 .side { background-color:#07f4ff; } </style><div id="tridiv"> <div class="scene" style="-webkit-transform:rotateX(-19deg) rotateY(208deg); -moz-transform:rotateX(-19deg) rotateY(208deg); -ms-transform:rotateX(-19deg) rotateY(208deg); transform:rotateX(-19deg) rotateY(208deg); "> <div class="shape cylinder-1 cyl-1"> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.3);"></div> </div> <div class="face tp"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.3);"></div> </div> <div class="face side s0"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.26);"></div> </div> <div class="face side s1"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.16);"></div> </div> <div class="face side s2"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.063);"></div> </div> <div class="face side s3"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.3);"></div> </div> <div class="face side s4"> <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.133);"></div> </div> <div class="face side s5"> <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.21);"></div> </div> <div class="face side s6"> <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.2);"></div> </div> <div class="face side s7"> <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.118);"></div> </div> <div class="face side s8"> <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.02);"></div> </div> <div class="face side s9"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.08);"></div> </div> <div class="face side s10"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.3);"></div> </div> <div class="face side s11"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.275);"></div> </div> <div class="face side s12"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.353);"></div> </div> <div class="face side s13"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.34);"></div> </div> </div> <div class="shape cylinder-2 cyl-2"> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.3);"></div> </div> <div class="face tp"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.3);"></div> </div> <div class="face side s0"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.26);"></div> </div> <div class="face side s1"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.16);"></div> </div> <div class="face side s2"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.063);"></div> </div> <div class="face side s3"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.3);"></div> </div> <div class="face side s4"> <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.133);"></div> </div> <div class="face side s5"> <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.21);"></div> </div> <div class="face side s6"> <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.2);"></div> </div> <div class="face side s7"> <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.118);"></div> </div> <div class="face side s8"> <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.02);"></div> </div> <div class="face side s9"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.08);"></div> </div> <div class="face side s10"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.3);"></div> </div> <div class="face side s11"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.275);"></div> </div> <div class="face side s12"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.353);"></div> </div> <div class="face side s13"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.34);"></div> </div> </div> </div> </div> Animals Protection Animals Rights Birds Protection Marine Animals Protection Turtles Protection Terrestrial Animals Protection Elephants Protection Global Humans Protection Childs Care Food Aid Houseless Help Medical Care Scolarisation Women RIghts Land and Forest Protection Land depollution Protection des Espèces Florales Reforestation Water Work Ocean Depollution Water Access -- Parent -- Add New Dépublier Filed Under:
