30:Tbe1,css = `section.container { width: 200px; height: 200px; perspective: 800px; padding: 100px; perspective-origin: center; } section.container #cube { width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1s; transform: translateZ(-100px) rotateX(${rotateX}deg); } section.container #cube figure { position: absolute; width: 196px; height: 196px; border: 2px solid black; line-height: 196px; text-align: center; font-family: sans-serif; font-size: 48px; color: white; margin: 0; } section.container #cube figure.front { background: linear-gradient(45deg, rgba(255, 102, 102, 0.8), rgba(153, 0, 0, 0.8)); text-shadow: 1px 1px 2px rgba(51, 0, 0, 0.8); transform: rotateY(0deg) translateZ(100px); } section.container #cube figure.back { background: linear-gradient(45deg, rgba(102, 255, 102, 0.8), rgba(0, 153, 0, 0.8)); text-shadow: 1px 1px 2px rgba(0, 51, 0, 0.8); transform: rotateX(180deg) translateZ(100px); } section.container #cube figure.top { background: linear-gradient(45deg, rgba(102, 102, 255, 0.8), rgba(0, 0, 153, 0.8)); text-shadow: 1px 1px 2px rgba(0, 0, 51, 0.8); transform: rotateX(90deg) translateZ(100px); } section.container #cube figure.bottom { background: linear-gradient(45deg, rgba(255, 179, 102, 0.8), rgba(153, 77, 0, 0.8)); text-shadow: 1px 1px 2px rgba(51, 26, 0, 0.8); transform: rotateX(-90deg) translateZ(100px); } section.container #cube figure.right { background: linear-gradient(45deg, rgba(179, 102, 255, 0.8), rgba(77, 0, 153, 0.8)); text-shadow: 1px 1px 2px rgba(26, 0, 51, 0.8); transform: rotateY(90deg) translateZ(100px); } section.container #cube figure.left { background: linear-gradient(45deg, rgba(255, 255, 102, 0.7), rgba(153, 153, 0, 0.7)); text-shadow: 1px 1px 2px rgba(51, 51, 0, 0.7); transform: rotateY(-90deg) translateZ(100px); } section.container #cube.show-front { transform: translateZ(-100px) rotateY(0deg); } section.container #cube.show-back { transform: translateZ(-100px) rotateX(-180deg); } section.container #cube.show-top { transform: translateZ(-100px) rotateX(-90deg); } section.container #cube.show-bottom { transform: translateZ(-100px) rotateX(90deg); } section.container #cube.show-right { transform: translateZ(-100px) rotateY(-90deg); } section.container #cube.show-left { transform: translateZ(-100px) rotateY(90deg); } section.container #cube.show-custom { transform: translateZ(-100px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg); } ul.buttons li { display: inline-block; list-style: none; } ul.buttons li:before { content: ""; } ul.buttons li button { border: 2px solid #183060; background: linear-gradient(#3060a0 0%, #203080 100%); color: white; text-shadow: 1px 1px 2px #183060; font-size: 1.1rem; padding: .5rem; border-radius: .5em; margin: .2rem; display: inline-block; cursor: pointer; } ul.buttons li button:hover { background: linear-gradient(#4080c0 0%, #3040a0 100%); }`31:[] 2e:{"title":"CSS 3D Cube","cells":[{"id":0,"value":"md`# CSS 3D Cube`","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"md`Inspired by https://desandro.github.io/3dtransforms/`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"container = html`

\n\t\t

\n\t\t\tFront\n\t\t\n\t\t

Back\n\t\t

Right\n\t\t

Left\n\t\t

Top\n\t\t

Bottom\n\t

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"md`### Custom rotation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"viewof rotateX = slider({min:-180, max:180, description:'X-axis rotation'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"viewof rotateY = slider({min:-180, max:180, description:'Y-axis rotation'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"viewof rotateZ = slider({min:-180, max:180, description:'Z-axis rotation'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"import {slider} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"md`## JS Boilerplate for buttons`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"setButtons = $(container).ready(function(){\n var lastClass;\n $('button').click(function(){\n var $cube = $('#cube'),\n newClass = 'show-' + $(this).data('face');\n $cube.removeClass(lastClass);\n $cube.addClass(newClass);\n lastClass = newClass;\n });\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"md`## CSS code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"cssCode = html`

${css}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"style = {\n const style = DOM.element('style');\n\t// , {\n\t// id: 'styles',\n\t// style: `display: block;\n\t// white-space: pre;\n\t// font-family: monospace;\n\t// font-size: .8em;`\n\t// });\n style.innerHTML = `${css}`;\n return style;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"md`# Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"md`### HighlightJS`","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"{\n const hljs = await require('highlightjs');\n hljs.highlightBlock(cssCode);\n return hljs;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"md`### jQuery`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"$$ = require('jquery')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}