Module:Sandbox/Harshrathod50/Cube 3D

--   The CSS 3D Cube    Author: Harsh Rathod    License: MIT    Version: 1.0.0

local p = {}

function p.cube(frame) local side = "100px" faceStyle = { ["align-items"] = "center", ["background"] = "yellow", ["border"] = "1px solid black", ["box-sizing"] = "border-box", ["display"] = "flex", ["flex-wrap"] = "wrap", ["justify-content"] = "center", ["height"] = side, ["opacity"] = 0.9, ["overflow"] = "hidden", ["position"] = "absolute", ["top"] = "calc(" .. side .. " / -2)", ["left"] = "calc(" .. side .. " / -2)", ["width"] = side }   cube = mw.html.create("div") cube :css({           ["height"] = 0,            ["position"] = "absolute",                ["top"] = "50%",                ["left"] = "50%",            ["transform"] = "rotateX(-45deg) rotateY(45deg)",            ["transform-style"] = "preserve-3d",            ["width"] = 0        }) :tag("div") :css(faceStyle) :css({           	["transform"] = "translateZ(calc(" .. side .. " / 2))"            }) :done :tag("div") :css(faceStyle) :css({           	["transform"] = "rotateY(180deg) translateZ(calc(" .. side .. " / 2))"            }) :done :tag("div") :css(faceStyle) :css({           	["transform"] = "rotateY(90deg) translateZ(calc(" .. side .. " / 2))"            }) :done :tag("div") :css(faceStyle) :css({           	["transform"] = "rotateY(-90deg) translateZ(calc(" .. side .. " / 2))"            }) :done :tag("div") :css(faceStyle) :css({           	["transform"] = "rotateX(90deg) translateZ(calc(" .. side .. " / 2))"            }) :done :tag("div") :css(faceStyle) :css({           	["transform"] = "rotateX(90deg) translateZ(calc(" .. side .. " / -2))"            }) cubeContainer = mw.html.create("div") cubeContainer :node(cube) :css({           ["box-sizing"] = "border-box",            ["height"] = "calc(" .. side .. " + (" .. side .. " * 0.75))",           ["position"] = "relative",            ["width"] = "calc(" .. side .. " + (" .. side .. " * 0.75))"       }) return cubeContainer end

return p