Module:Sandbox/Harshrathod50/Cube 3D

Documentation for this module may be created at Module:Sandbox/Harshrathod50/Cube 3D/doc

--[[
    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