2d:null 2e:["$","title",null,{"children":"CSS 3D Cube | Óscar Gómez Alcañiz | Observable"}] 33: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%); }`34:[] 31:{"id":"06f5c6bcc8e37481","slug":"css-3d-cube","title":"CSS 3D Cube","thumbnail":"b4eec1ac501b84af6982a506dd8aa320e38e7d02e4311d7f07876c17d0b2f7ea","access_level":"public","create_time":"$D2018-03-07T21:23:02.015Z","update_time":"$D2023-04-15T19:15:05.175Z","view_time":null,"first_public_time":"$D2018-03-07T22:48:25.422Z","fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"262bdb9641410f74","login":"oscardr","name":"Óscar Gómez Alcañiz","avatar_url":"https://avatars-next.observableusercontent.com/507dd8479ead7722ebb573ca30b2f494cc44cdabe2e8fb6bd02dd4e35cb345ec","tier":"starter_2024"},"version":188,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"918bb17536ecf71e","login":"oscardr","name":"Óscar Gómez Alcañiz","avatar_url":"https://avatars-next.observableusercontent.com/507dd8479ead7722ebb573ca30b2f494cc44cdabe2e8fb6bd02dd4e35cb345ec","tier":null}],"members":[{"type":"individual","id":"918bb17536ecf71e","login":"oscardr","name":"Óscar Gómez Alcañiz","avatar_url":"https://avatars-next.observableusercontent.com/507dd8479ead7722ebb573ca30b2f494cc44cdabe2e8fb6bd02dd4e35cb345ec","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"title":"CSS 3D Cube","cells":[{"id":0,"value":"md`# CSS 3D Cube`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"md`Inspired by https://desandro.github.io/3dtransforms/`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"md`### Custom rotation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"viewof rotateX = slider({min:-180, max:180, description:'X-axis rotation'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"viewof rotateY = slider({min:-180, max:180, description:'Y-axis rotation'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"viewof rotateZ = slider({min:-180, max:180, description:'Z-axis rotation'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"import {slider} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"md`## JS Boilerplate for buttons`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"md`## CSS code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"cssCode = html`

${css}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"md`# Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"md`### HighlightJS`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"{\n const hljs = await require('highlightjs');\n hljs.highlightBlock(cssCode);\n return hljs;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"md`### jQuery`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$$ = require('jquery')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"