RubiCSS cube

Developer
Gregor Adams
Size
12,148 Kb
Views
74,888
  1. RubiCSS cube Previews
  2. RubiCSS cube HTML Codes
  3. RubiCSS cube CSS Codes
  4. RubiCSS cube JS Codes

How do I make an rubicss cube?

Chrome only !!! a Rubik's Cube made in HTML, JavaScript and CSS.Drag to playNow works in Firefox!!!!. What is a rubicss cube? How do you make a rubicss cube? This script and codes were developed by Gregor Adams on 20 June 2022, Monday.

RubiCSS cube Previews
IQ Test

RubiCSS cube - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>RubiCSS cube</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<link href="//fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet" type="text/css"/>
<!-- --- @start control section-->
<div class="controls"> <!-- --- @start button-wrapper--> <div class="button-wrapper"> <div> <button class="themer selected" type="button" data-theme="#{theme}">flat </button> <button class="themer" type="button" data-theme="#{theme}">realistic </button> <button class="scrambler" type="button">Scramble</button> </div> </div>
</div>
<h1>RubiCCS cube</h1>
<h2>drag anywhere to rotate</h2>
<h2>drag cube to play</h2>
<h3>The middle slice does not turn, just like a real Rubik's cube</h3>
<!-- --- @start canvas-->
<div class="canvas theme-flat"> <div class="cube-wrapper"> <div class="cube"> <div class="swiper top" data-x="y" data-y="x" data-control="top"></div> <div class="swiper bottom" data-x="y" data-y="x" data-control="bottom"></div> <div class="swiper left" data-x="y" data-y="z" data-control="left"></div> <div class="swiper right" data-x="y" data-y="z" data-control="right"></div> <div class="swiper front" data-x="z" data-y="x" data-control="front"></div> <div class="swiper back" data-x="z" data-y="x" data-control="back"></div> <!-- --- @start grip--> <div class="grip"> <div class="axis axis-grip"></div> </div> <!-- --- @start parts--> <div class="cube-part-wrapper cube-part-wrapper-222" data-x="2" data-y="2" data-z="2"> <div class="axis axis-part"> <ul class="cube-part"> <li class="side top white"> <div class="sticker"></div> </li> <li class="side bottom"> <div class="sticker"></div> </li> <li class="side right orange"> <div class="sticker"></div> </li> <li class="side left"> <div class="sticker"></div> </li> <li class="side back green"> <div class="sticker"></div> </li> <li class="side front"> <div class="sticker"></div> </li> </ul> </div> </div> <div class="cube-part-wrapper cube-part-wrapper-221" data-x="2" data-y="2" data-z="1"> <div class="axis axis-part"> <ul class="cube-part"> <li class="side top"> <div class="sticker"></div> </li> <li class="side bottom"> <div class="sticker"></div> </li> <li class="side right orange"> <div class="sticker"></div> </li> <li class="side left"> <div class="sticker"></div> </li> <li class="side back green"> <div class="sticker"></div> </li> <li class="side front"> <div class="sticker"></div> </li> </ul> </div> </div> <div class="cube-part-wrapper cube-part-wrapper-220" data-x="2" data-y="2" data-z="0"> <div class="axis axis-part"> <ul class="cube-part"> <li class="side top"> <div class="sticker"></div> </li> <li class="side bottom yellow"> <div class="sticker"></div> </li> <li class="side right orange"> <div class="sticker"></div> </li> <li class="side left"> <div class="sticker"></div> </li> <li class="side back green"> <div class="sticker"></div> </li> <li class="side front"> <div class="sticker"></div> </li> </ul> </div> </div> <div class="cube-part-wrapper cube-part-wrapper-212" data-x="2" data-y="1" data-z="2"> <div class="axis axis-part"> <ul class="cube-part"> <li class="side top white"> <div class="sticker"></div> </li> <li class="side bottom"> <div class="sticker"></div> </li> <li class="side right"> <div class="sticker"></div> </li> <li class="side left"> <div class="sticker"></div> </li> <li class="side back green"> <div class="sticker"></div> </li> <li class="side front"> <div class="sticker"></div> </li> </ul> </div> </div> <div class="cube-part-wrapper cube-part-wrapper-211" data-x="2" data-y="1" data-z="1"> <div class="axis axis-part"> <ul class="cube-part"> <li class="side top"> <div class="sticker"></div> </li> <li class="side bottom"> <div class="sticker"></div> </li> <li class="side right"> <div class="sticker"></div> </li> <li class="side left"> <div class="sticker"></div> </li> <li class="side back green"> <div class="sticker"></div> </li> <li class="side front"> <div class="sticker"></div> </li> </ul> </div> </div> <div class="cube-part-wrapper cube-part-wrapper-210" data-x="2" data-y="1" data-z="0"> <div class="axis axis-part"> <ul class="cube-part"> <li class="side top"> <div class="sticker"></div> </li> <li class="side bottom yellow"> <div class="sticker"></div> </li> <li class="side right"> <div class="sticker"></div> </li> <li class="side left"> <div class="sticker"></div> </li> <li class="side back green"> <div class="sticker"></div> </li> <li class="side front"> <div class="sticker"></div> </li> </ul> </div> </div> <div class="cube-part-wrapper cube-part-wrapper-202" data-x="2" data-y="0" data-z="2"> <div class="axis axis-part"> <ul class="cube-part"> <li class="side top white"> <div class="sticker"></div> </li> <li class="side bottom"> <div class="sticker"></div> </li> <li class="side right"> <div class="sticker"></div> </li> <li class="side left red"> <div class="sticker"></div> </li> <li class="side back green"> <div class="sticker"></div> </li> <li class="side front"> <div class="sticker"></div> </li> </ul> </div> </div> <div class="cube-part-wrapper cube-part-wrapper-201" data-x="2" data-y="0" data-z="1"> <div class="axis axis-part"> <ul class="cube-part"> <li class="side top"> <div class="sticker"></div> </li> <li class="side bottom"> <div class="sticker"></div> </li> <li class="side right"> <div class="sticker"></div> </li> <li class="side left red"> <div class="sticker"></div> </li> <li class="side back green"> <div class="sticker"></div> </li> <li class="side front"> <div class="sticker"></div> </li> </ul> </div> </div> <div class="cube-part-wrapper cube-part-wrapper-200" data-x="2" data-y="0" data-z="0"> <div class="axis axis-part"> <ul class="cube-part"> <li class="side top"> <div class="sticker"></div> </li> <li class="side bottom yellow"> <div class="sticker"></div> </li> <li class="side right"> <div class="sticker"></div> </li> <li class="side left red"> <div class="sticker"></div> </li> <li class="side back green"> <div class="sticker"></div> </li> <li class="side front"> <div class="sticker"></div> </li> </ul> </div> </div> <div class="cube-part-wrapper cube-part-wrapper-122" data-x="1" data-y="2" data-z="2"> <div class="axis axis-part"> <ul class="cube-part"> <li class="side top white"> <div class="sticker"></div> </li> <li class="side bottom"> <div class="sticker"></div> </li> <li class="side right orange"> <div class="sticker"></div> </li> <li class="side left"> <div class="sticker"></div> </li> <li class="side back"> <div class="sticker"></div> </li> <li class="side front"> <div class="sticker"></div> </li> </ul> </div> </div> <div class="cube-part-wrapper cube-part-wrapper-121" data-x="1" data-y="2" data-z="1"> <div class="axis axis-part"> <ul class="cube-part"> <li class="side top"> <div class="sticker"></div> </li> <li class="side bottom"> <div class="sticker"></div> </li> <li class="side right orange"> <div class="sticker"></div> </li> <li class="side left"> <div class="sticker"></div> </li> <li class="side back"> <div class="sticker"></div> </li> <li class="side front"> <div class="sticker"></div> </li> </ul> </div> </div> <div class="cube-part-wrapper cube-part-wrapper-120" data-x="1" data-y="2" data-z="0"> <div class="axis axis-part"> <ul class="cube-part"> <li class="side top"> <div class="sticker"></div> </li> <li class="side bottom yellow"> <div class="sticker"></div> </li> <li class="side right orange"> <div class="sticker"></div> </li> <li class="side left"> <div class="sticker"></div> </li> <li class="side back"> <div class="sticker"></div> </li> <li class="side front"> <div class="sticker"></div> </li> </ul> </div> </div> <div class="cube-part-wrapper cube-part-wrapper-112" data-x="1" data-y="1" data-z="2"> <div class="axis axis-part"> <ul class="cube-part"> <li class="side top white"> <div class="sticker"></div> </li> <li class="side bottom"> <div class="sticker"></div> </li> <li class="side right"> <div class="sticker"></div> </li> <li class="side left"> <div class="sticker"></div> </li> <li class="side back"> <div class="sticker"></div> </li> <li class="side front"> <div class="sticker"></div> </li> </ul> </div> </div> <div class="cube-part-wrapper cube-part-wrapper-111" data-x="1" data-y="1" data-z="1"> <div class="axis axis-part"> <ul class="cube-part"> <li class="side top"> <div class="sticker"></div> </li> <li class="side bottom"> <div class="sticker"></div> </li> <li class="side right"> <div class="sticker"></div> </li> <li class="side left"> <div class="sticker"></div> </li> <li class="side back"> <div class="sticker"></div> </li> <li class="side front"> <div class="sticker"></div> </li> </ul> </div> </div> <div class="cube-part-wrapper cube-part-wrapper-110" data-x="1" data-y="1" data-z="0"> <div class="axis axis-part"> <ul class="cube-part"> <li class="side top"> <div class="sticker"></div> </li> <li class="side bottom yellow"> <div class="sticker"></div> </li> <li class="side right"> <div class="sticker"></div> </li> <li class="side left"> <div class="sticker"></div> </li> <li class="side back"> <div class="sticker"></div> </li> <li class="side front"> <div class="sticker"></div> </li> </ul> </div> </div> <div class="cube-part-wrapper cube-part-wrapper-102" data-x="1" data-y="0" data-z="2"> <div class="axis axis-part"> <ul class="cube-part"> <li class="side top white"> <div class="sticker"></div> </li> <li class="side bottom"> <div class="sticker"></div> </li> <li class="side right"> <div class="sticker"></div> </li> <li class="side left red"> <div class="sticker"></div> </li> <li class="side back"> <div class="sticker"></div> </li> <li class="side front"> <div class="sticker"></div> </li> </ul> </div> </div> <div class="cube-part-wrapper cube-part-wrapper-101" data-x="1" data-y="0" data-z="1"> <div class="axis axis-part"> <ul class="cube-part"> <li class="side top"> <div class="sticker"></div> </li> <li class="side bottom"> <div class="sticker"></div> </li> <li class="side right"> <div class="sticker"></div> </li> <li class="side left red"> <div class="sticker"></div> </li> <li class="side back"> <div class="sticker"></div> </li> <li class="side front"> <div class="sticker"></div> </li> </ul> </div> </div> <div class="cube-part-wrapper cube-part-wrapper-100" data-x="1" data-y="0" data-z="0"> <div class="axis axis-part"> <ul class="cube-part"> <li class="side top"> <div class="sticker"></div> </li> <li class="side bottom yellow"> <div class="sticker"></div> </li> <li class="side right"> <div class="sticker"></div> </li> <li class="side left red"> <div class="sticker"></div> </li> <li class="side back"> <div class="sticker"></div> </li> <li class="side front"> <div class="sticker"></div> </li> </ul> </div> </div> <div class="cube-part-wrapper cube-part-wrapper-022" data-x="0" data-y="2" data-z="2"> <div class="axis axis-part"> <ul class="cube-part"> <li class="side top white"> <div class="sticker"></div> </li> <li class="side bottom"> <div class="sticker"></div> </li> <li class="side right orange"> <div class="sticker"></div> </li> <li class="side left"> <div class="sticker"></div> </li> <li class="side back"> <div class="sticker"></div> </li> <li class="side front blue"> <div class="sticker"></div> </li> </ul> </div> </div> <div class="cube-part-wrapper cube-part-wrapper-021" data-x="0" data-y="2" data-z="1"> <div class="axis axis-part"> <ul class="cube-part"> <li class="side top"> <div class="sticker"></div> </li> <li class="side bottom"> <div class="sticker"></div> </li> <li class="side right orange"> <div class="sticker"></div> </li> <li class="side left"> <div class="sticker"></div> </li> <li class="side back"> <div class="sticker"></div> </li> <li class="side front blue"> <div class="sticker"></div> </li> </ul> </div> </div> <div class="cube-part-wrapper cube-part-wrapper-020" data-x="0" data-y="2" data-z="0"> <div class="axis axis-part"> <ul class="cube-part"> <li class="side top"> <div class="sticker"></div> </li> <li class="side bottom yellow"> <div class="sticker"></div> </li> <li class="side right orange"> <div class="sticker"></div> </li> <li class="side left"> <div class="sticker"></div> </li> <li class="side back"> <div class="sticker"></div> </li> <li class="side front blue"> <div class="sticker"></div> </li> </ul> </div> </div> <div class="cube-part-wrapper cube-part-wrapper-012" data-x="0" data-y="1" data-z="2"> <div class="axis axis-part"> <ul class="cube-part"> <li class="side top white"> <div class="sticker"></div> </li> <li class="side bottom"> <div class="sticker"></div> </li> <li class="side right"> <div class="sticker"></div> </li> <li class="side left"> <div class="sticker"></div> </li> <li class="side back"> <div class="sticker"></div> </li> <li class="side front blue"> <div class="sticker"></div> </li> </ul> </div> </div> <div class="cube-part-wrapper cube-part-wrapper-011" data-x="0" data-y="1" data-z="1"> <div class="axis axis-part"> <ul class="cube-part"> <li class="side top"> <div class="sticker"></div> </li> <li class="side bottom"> <div class="sticker"></div> </li> <li class="side right"> <div class="sticker"></div> </li> <li class="side left"> <div class="sticker"></div> </li> <li class="side back"> <div class="sticker"></div> </li> <li class="side front blue"> <div class="sticker"></div> </li> </ul> </div> </div> <div class="cube-part-wrapper cube-part-wrapper-010" data-x="0" data-y="1" data-z="0"> <div class="axis axis-part"> <ul class="cube-part"> <li class="side top"> <div class="sticker"></div> </li> <li class="side bottom yellow"> <div class="sticker"></div> </li> <li class="side right"> <div class="sticker"></div> </li> <li class="side left"> <div class="sticker"></div> </li> <li class="side back"> <div class="sticker"></div> </li> <li class="side front blue"> <div class="sticker"></div> </li> </ul> </div> </div> <div class="cube-part-wrapper cube-part-wrapper-002" data-x="0" data-y="0" data-z="2"> <div class="axis axis-part"> <ul class="cube-part"> <li class="side top white"> <div class="sticker"></div> </li> <li class="side bottom"> <div class="sticker"></div> </li> <li class="side right"> <div class="sticker"></div> </li> <li class="side left red"> <div class="sticker"></div> </li> <li class="side back"> <div class="sticker"></div> </li> <li class="side front blue"> <div class="sticker"></div> </li> </ul> </div> </div> <div class="cube-part-wrapper cube-part-wrapper-001" data-x="0" data-y="0" data-z="1"> <div class="axis axis-part"> <ul class="cube-part"> <li class="side top"> <div class="sticker"></div> </li> <li class="side bottom"> <div class="sticker"></div> </li> <li class="side right"> <div class="sticker"></div> </li> <li class="side left red"> <div class="sticker"></div> </li> <li class="side back"> <div class="sticker"></div> </li> <li class="side front blue"> <div class="sticker"></div> </li> </ul> </div> </div> <div class="cube-part-wrapper cube-part-wrapper-000" data-x="0" data-y="0" data-z="0"> <div class="axis axis-part"> <ul class="cube-part"> <li class="side top"> <div class="sticker"></div> </li> <li class="side bottom yellow"> <div class="sticker"></div> </li> <li class="side right"> <div class="sticker"></div> </li> <li class="side left red"> <div class="sticker"></div> </li> <li class="side back"> <div class="sticker"></div> </li> <li class="side front blue"> <div class="sticker"></div> </li> </ul> </div> </div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

RubiCSS cube - Script Codes CSS Codes

/** ██████╗ █████╗ ███████╗███████╗ * ██╔══██╗██╔══██╗██╔════╝██╔════╝ * ██████╔╝███████║███████╗█████╗ * ██╔══██╗██╔══██║╚════██║██╔══╝ * ██████╔╝██║ ██║███████║███████╗ * ╚═════╝ ╚═╝ ╚═╝╚══════╝╚══════╝ */
*,
*:before,
*:after { box-sizing: border-box; margin: 0; padding: 0; font-family: inherit; line-height: inherit; font-weight: 300; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
html { height: 100%; min-height: 100%; font-size: 16px; font-family: 'Lato', sans-serif; line-height: 1.25; color: #fff;
}
html,
body { overflow: hidden;
}
body { background: #2b4746;
}
ul,
ol { list-style: none;
}
ul li,
ol li { list-style: inherit;
}
h1 { font-size: 1.5em; margin: 0 1rem 0.5em;
}
h2 { font-size: 1.3em; margin: 0 1rem 0.5em;
}
h3 { font-size: 1.1em; margin: 0 1rem 0.5em;
}
/** * ███████╗██████╗ █████╗ ███╗ ███╗███████╗ * ██╔════╝██╔══██╗██╔══██╗████╗ ████║██╔════╝ * █████╗ ██████╔╝███████║██╔████╔██║█████╗ * ██╔══╝ ██╔══██╗██╔══██║██║╚██╔╝██║██╔══╝ * ██║ ██║ ██║██║ ██║██║ ╚═╝ ██║███████╗ * ╚═╝ ╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═╝╚══════╝ * */
body { cursor: -webkit-grab; cursor: grab;
}
body:active { cursor: -webkit-grabbing; cursor: grabbing;
}
.canvas { position: absolute; height: 22.5rem; width: 15rem; overflow: visible; top: 14em; left: 50%; margin-left: -7.5rem; -webkit-perspective: 700px; perspective: 700px;
}
.canvas:hover { cursor: -webkit-grab; cursor: grab;
}
.canvas:active { cursor: -webkit-grabbing; cursor: grabbing;
}
/** * ███████╗ ██████╗ ██████╗ ███╗ ███╗███████╗ * ██╔════╝██╔═══██╗██╔══██╗████╗ ████║██╔════╝ * █████╗ ██║ ██║██████╔╝██╔████╔██║███████╗ * ██╔══╝ ██║ ██║██╔══██╗██║╚██╔╝██║╚════██║ * ██║ ╚██████╔╝██║ ██║██║ ╚═╝ ██║███████║ * ╚═╝ ╚═════╝ ╚═╝ ╚═╝╚═╝ ╚═╝╚══════╝ */
::-moz-focus-inner { outline: 0;
}
button { line-height: 1;
}
button:focus { outline: 0;
}
button { margin: 0 1rem 1rem; padding: 1em; font-size: 0.6rem; background: #2b4746; border: 0.1rem solid #fff; color: #fff; box-shadow: none; border-radius: 0.1rem; cursor: pointer; font-variant: small-caps;
}
button:focus,
button:hover { color: #182727; background: #fff; border-color: #182727;
}
button:active { color: #fff; border-color: #182727; background-color: #182727;
}
button:focus { outline: 0;
}
button.selected { color: #fff; border-color: #182727; background-color: #182727;
}
.controls { position: absolute; top: 0; right: 0; max-width: 20rem; z-index: 5; padding-left: 1rem; padding-top: 1rem; cursor: default;
}
/** * ██████╗██╗ ██╗██████╗ ███████╗███████╗ * ██╔════╝██║ ██║██╔══██╗██╔════╝██╔════╝ * ██║ ██║ ██║██████╔╝█████╗ ███████╗ * ██║ ██║ ██║██╔══██╗██╔══╝ ╚════██║ * ╚██████╗╚██████╔╝██████╔╝███████╗███████║ * ╚═════╝ ╚═════╝ ╚═════╝ ╚══════╝╚══════╝ */
.cube { position: absolute; top: 0; left: 0; height: inherit; width: inherit; -webkit-transition: -webkit-transform 400ms linear; transition: -webkit-transform 400ms linear; transition: transform 400ms linear; transition: transform 400ms linear, -webkit-transform 400ms linear; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotate3d(0, 1, 0, -35deg) rotate3d(1, 0, 0, 35deg); transform: rotate3d(0, 1, 0, -35deg) rotate3d(1, 0, 0, 35deg);
}
.cube .swiper { position: absolute; left: 0; top: 0; height: 15rem; width: 15rem; outline-offset: 10px; visibility: visible;
}
.cube .swiper.top { -webkit-transform: rotate3d(0, 1, 0, -180deg) translate3d(0, 0, -7.89473684rem); transform: rotate3d(0, 1, 0, -180deg) translate3d(0, 0, -7.89473684rem);
}
.cube .swiper.bottom { -webkit-transform: translate3d(0, 0, -7.89473684rem); transform: translate3d(0, 0, -7.89473684rem);
}
.cube .swiper.left { -webkit-transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, -7.89473684rem); transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, -7.89473684rem);
}
.cube .swiper.right { -webkit-transform: rotate3d(0, 0, 1, -180deg) rotate3d(0, 1, 0, 90deg) translate3d(0, 0, -7.89473684rem); transform: rotate3d(0, 0, 1, -180deg) rotate3d(0, 1, 0, 90deg) translate3d(0, 0, -7.89473684rem);
}
.cube .swiper.front { -webkit-transform: rotate3d(1, 0, 0, -180deg) rotate3d(1, 0, 0, -90deg) translate3d(0, 0, -7.89473684rem); transform: rotate3d(1, 0, 0, -180deg) rotate3d(1, 0, 0, -90deg) translate3d(0, 0, -7.89473684rem);
}
.cube .swiper.back { -webkit-transform: rotate3d(0, 1, 0, -180deg) rotate3d(1, 0, 0, -90deg) translate3d(0, 0, -7.89473684rem); transform: rotate3d(0, 1, 0, -180deg) rotate3d(1, 0, 0, -90deg) translate3d(0, 0, -7.89473684rem);
}
.cube-wrapper { position: absolute; top: 0; left: 0; height: 15rem; width: 15rem; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; -webkit-transition-duration: 0; transition-duration: 0; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; visibility: hidden;
}
.cube-part { height: inherit; width: inherit;
}
.cube-part .side { position: absolute; top: 0; left: 0; height: inherit; width: inherit; line-height: 5rem; text-align: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; border-radius: 0.6rem;
}
.cube-part .side.white,
.cube-part .side.blue,
.cube-part .side.orange,
.cube-part .side.red,
.cube-part .side.green,
.cube-part .side.yellow { background: #1e1e1e;
}
.cube-part .side.white .sticker,
.cube-part .side.blue .sticker,
.cube-part .side.orange .sticker,
.cube-part .side.red .sticker,
.cube-part .side.green .sticker,
.cube-part .side.yellow .sticker { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; visibility: visible;
}
.cube-part .side.front { -webkit-transform: translate3d(-2.5rem, 0, 0) rotate3d(0, 1, 0, -90deg) scale(1); transform: translate3d(-2.5rem, 0, 0) rotate3d(0, 1, 0, -90deg) scale(1);
}
.cube-part .side.back { -webkit-transform: translate3d(2.5rem, 0, 0) rotate3d(0, 1, 0, 90deg) scale(1); transform: translate3d(2.5rem, 0, 0) rotate3d(0, 1, 0, 90deg) scale(1);
}
.cube-part .side.right { -webkit-transform: translate3d(0, 2.5rem, 0) rotate3d(1, 0, 0, -90deg) scale(1); transform: translate3d(0, 2.5rem, 0) rotate3d(1, 0, 0, -90deg) scale(1);
}
.cube-part .side.left { -webkit-transform: translate3d(0, -2.5rem, 0) rotate3d(1, 0, 0, 90deg) scale(1); transform: translate3d(0, -2.5rem, 0) rotate3d(1, 0, 0, 90deg) scale(1);
}
.cube-part .side.top { -webkit-transform: translate3d(0, 0, 2.5rem) rotate3d(1, 0, 0, 0) scale(1); transform: translate3d(0, 0, 2.5rem) rotate3d(1, 0, 0, 0) scale(1);
}
.cube-part .side.bottom { -webkit-transform: translate3d(0, 0, -2.5rem) rotate3d(1, 0, 0, -180deg) scale(1); transform: translate3d(0, 0, -2.5rem) rotate3d(1, 0, 0, -180deg) scale(1);
}
.cube-part-wrapper { position: absolute; height: 5rem; width: 5rem; z-index: 0; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 800ms; transition-duration: 800ms; pointer-events: none; visibility: hidden;
}
.cube-part-wrapper[data-x="0"] { left: 0;
}
.cube-part-wrapper[data-x="1"] { left: 5rem;
}
.cube-part-wrapper[data-x="2"] { left: 10rem;
}
.cube-part-wrapper[data-y="0"] { top: 0;
}
.cube-part-wrapper[data-y="1"] { top: 5rem;
}
.cube-part-wrapper[data-y="2"] { top: 10rem;
}
.cube-part-wrapper[data-z="0"] { -webkit-transform: translate3d(0, 0, -5rem); transform: translate3d(0, 0, -5rem);
}
.cube-part-wrapper[data-z="1"] { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
}
.cube-part-wrapper[data-z="2"] { -webkit-transform: translate3d(0, 0, 5rem); transform: translate3d(0, 0, 5rem);
}
/** * ██████╗ ██████╗ ██╗██████╗ * ██╔════╝ ██╔══██╗██║██╔══██╗ * ██║ ███╗██████╔╝██║██████╔╝ * ██║ ██║██╔══██╗██║██╔═══╝ * ╚██████╔╝██║ ██║██║██║ * ╚═════╝ ╚═╝ ╚═╝╚═╝╚═╝ * */
.grip { position: absolute; top: 0; left: 0; height: inherit; width: inherit; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: hidden; backface-visibility: hidden; pointer-events: none;
}
.grip .axis { -webkit-transition: -webkit-transform 400ms; transition: -webkit-transform 400ms; transition: transform 400ms; transition: transform 400ms, -webkit-transform 400ms;
}
.grip .axis.manual { -webkit-transition: none; transition: none;
}
.grip .axis.fast { -webkit-transition: -webkit-transform 200ms; transition: -webkit-transform 200ms; transition: transform 200ms; transition: transform 200ms, -webkit-transform 200ms;
}
.axis { position: absolute; top: 0; left: 0; height: inherit; width: inherit; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
/** * ████████╗██╗ ██╗███████╗███╗ ███╗███████╗ * ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝ * ██║ ███████║█████╗ ██╔████╔██║█████╗ * ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ * ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗ * ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝ */
.theme-flat .cube-part-wrapper-112 .cube-part .side.white .sticker { background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/28359/rubik-logo.png'); background-size: 100% auto;
}
.theme-flat .cube-part .side { background: none; border-radius: 0;
}
.theme-flat .cube-part .side.white .sticker,
.theme-flat .cube-part .side.blue .sticker,
.theme-flat .cube-part .side.orange .sticker,
.theme-flat .cube-part .side.red .sticker,
.theme-flat .cube-part .side.green .sticker,
.theme-flat .cube-part .side.yellow .sticker { -webkit-transform: translateZ(1px); transform: translateZ(1px); position: absolute; top: 0.3rem; left: 0.3rem; right: 0.3rem; bottom: 0.3rem; border-radius: 0.3rem; z-index: 2; -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.theme-flat .cube-part .side.white .sticker { background-color: #fff;
}
.theme-flat .cube-part .side.blue .sticker { background-color: #0051ba;
}
.theme-flat .cube-part .side.orange .sticker { background-color: #ff5800;
}
.theme-flat .cube-part .side.red .sticker { background-color: #c41e3a;
}
.theme-flat .cube-part .side.green .sticker { background-color: #009e60;
}
.theme-flat .cube-part .side.yellow .sticker { background-color: #ffd500;
}
/** * ████████╗██╗ ██╗███████╗███╗ ███╗███████╗ * ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝ * ██║ ███████║█████╗ ██╔████╔██║█████╗ * ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ * ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗ * ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝ */
.theme-realistic .cube-part-wrapper-112 .cube-part .side.white .sticker { background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/28359/rubik-logo.png'); background-size: 100% auto;
}
.theme-realistic .cube-part .side { visibility: visible; box-shadow: 0 0 2px 0 #3f3f3f inset, 0 0 0 0.3rem #2b2b2b inset; border-radius: 0.6rem; background-color: #1e1e1e;
}
.theme-realistic .cube-part .side .sticker { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 0.6rem; z-index: 2; background-color: #1e1e1e; box-shadow: 0 0 2px 0 #3f3f3f inset, 0 0 0 0.3rem #2b2b2b inset, 0 0 1px 0.4rem rgba(255, 255, 255, 0.2) inset; background-image: -webkit-radial-gradient(ellipse farthest-corner, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0)); background-image: radial-gradient(ellipse farthest-corner, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0));
}
.theme-realistic .cube-part .side.white .sticker { background-color: #fff;
}
.theme-realistic .cube-part .side.blue .sticker { background-color: #0051ba;
}
.theme-realistic .cube-part .side.orange .sticker { background-color: #ff5800;
}
.theme-realistic .cube-part .side.red .sticker { background-color: #c41e3a;
}
.theme-realistic .cube-part .side.green .sticker { background-color: #009e60;
}
.theme-realistic .cube-part .side.yellow .sticker { background-color: #ffd500;
}
.theme-realistic .cube-part .side.white .sticker,
.theme-realistic .cube-part .side.blue .sticker,
.theme-realistic .cube-part .side.orange .sticker,
.theme-realistic .cube-part .side.red .sticker,
.theme-realistic .cube-part .side.green .sticker,
.theme-realistic .cube-part .side.yellow .sticker { -webkit-transform: translateZ(1px); transform: translateZ(1px);
}

RubiCSS cube - Script Codes JS Codes

/* jshint sub: true */
(function($, window, document, undefined) { 'use strict'; var data = {}; var allTurns = ['base', 'left', 'right']; var allAx = ['x', 'y', 'z']; for (var a = 0; a < allAx.length; a++) { data[allAx[a]] = {}; for (var l = 0; l < allTurns.length; l++) { data[allAx[a]][allTurns[l]] = {}; } } var makeData1 = function(m, n, o, i, dir) { var v = $.extend(true, [], data[m].base[i]); var w = $.extend(true, [], data[m].base[i]); data[m][dir][i] = v.sort(function(a, b) { if (a[o] > b[o]) { return 1; } else if (a[o] < b[o]) { return -1; } else { if (a[n] > b[n]) { return -1; } else { return 1; } } }); }; var makeData2 = function(m, n, o, i, dir) { var v = $.extend(true, [], data[m].base[i]); var w = $.extend(true, [], data[m].base[i]); data[m][dir][i] = w.sort(function(a, b) { if (a[o] > b[o]) { return -1; } else if (a[o] < b[o]) { return 1; } else { if (a[n] > b[n]) { return 1; } else { return -1; } } }); }; var makeData3 = function(m, n, o, i, dir) { var v = $.extend(true, [], data[m].base[i]); var w = $.extend(true, [], data[m].base[i]); data[m][dir][i] = v.sort(function(a, b) { if (a[o] > b[o]) { return 1; } else if (a[o] < b[o]) { return -1; } else { if (a[n] > b[n]) { return 1; } else { return -1; } } }); }; var makeData4 = function(m, n, o, i, dir) { var v = $.extend(true, [], data[m].base[i]); var w = $.extend(true, [], data[m].base[i]); data[m][dir][i] = w.sort(function(a, b) { if (a[o] > b[o]) { return -1; } else if (a[o] < b[o]) { return 1; } else { if (a[n] > b[n]) { return -1; } else { return 1; } } }); }; for (var i = 0; i < 3; i++) { data['x']['base'][i] = [{ 'x': i, 'y': 0, 'z': 0 }, { 'x': i, 'y': 0, 'z': 1 }, { 'x': i, 'y': 0, 'z': 2 }, { 'x': i, 'y': 1, 'z': 0 }, { 'x': i, 'y': 1, 'z': 1 }, { 'x': i, 'y': 1, 'z': 2 }, { 'x': i, 'y': 2, 'z': 0 }, { 'x': i, 'y': 2, 'z': 1 }, { 'x': i, 'y': 2, 'z': 2 }]; data['y']['base'][i] = [{ 'x': 0, 'y': i, 'z': 0 }, { 'x': 0, 'y': i, 'z': 1 }, { 'x': 0, 'y': i, 'z': 2 }, { 'x': 1, 'y': i, 'z': 0 }, { 'x': 1, 'y': i, 'z': 1 }, { 'x': 1, 'y': i, 'z': 2 }, { 'x': 2, 'y': i, 'z': 0 }, { 'x': 2, 'y': i, 'z': 1 }, { 'x': 2, 'y': i, 'z': 2 }]; data['z']['base'][i] = [{ 'x': 0, 'y': 2, 'z': i }, { 'x': 1, 'y': 2, 'z': i }, { 'x': 2, 'y': 2, 'z': i }, { 'x': 0, 'y': 1, 'z': i }, { 'x': 1, 'y': 1, 'z': i }, { 'x': 2, 'y': 1, 'z': i }, { 'x': 0, 'y': 0, 'z': i }, { 'x': 1, 'y': 0, 'z': i }, { 'x': 2, 'y': 0, 'z': i }]; makeData1('x', 'y', 'z', i, 'left'); makeData2('x', 'y', 'z', i, 'right'); makeData2('y', 'x', 'z', i, 'left'); makeData1('y', 'x', 'z', i, 'right'); makeData3('z', 'y', 'x', i, 'left'); makeData4('z', 'y', 'x', i, 'right'); } var rotate3d = { 'x': '1,0,0,', 'y': '0,1,0,', 'z': '0,0,1,' }; var $gripAxis; var cubeRotationSpeed = 1.5; var cache = {}; var canvas = { 'threshold': 10, 'block': false, 'down': false, 'axis': null, 'css': '', 'mouse': { 'distance': 0, 'time': 0 } }; var randomNumber = function(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }; var classWithPrefix = function(regex) { return function(index, classes) { return classes.split(/\s+/).filter(function(el) { return regex.test(el); }).join(' '); }; }; /** * @jsdoc function * @name rubics.clearHelpers * @description * clear the grip after the rotation */ var clearHelpers = function() { var $gripAxis = $('.grip .axis'); $gripAxis.css({ transition: 'none', transform: '' }); setTimeout(function() { $gripAxis.css({ transition: '' }); }, 0); }; /** * @jsdoc function * @name rubics.positionParts * @description * puts the cubes in the new position */ var positionParts = function(turnAxis, level, direction) { if (!turnAxis) { return false; } var axis = ['x', 'y', 'z']; var elements = []; var oppositeDirection = direction === 'right' ? 'left' : 'right'; $.each(data[turnAxis]['base'][level], function(i, obj) { var selector3d = '[data-x="'; selector3d += obj['x']; selector3d += '"][data-y="'; selector3d += obj['y']; selector3d += '"][data-z="'; selector3d += obj['z'] + '"]'; elements.push($(selector3d)); }); $.each(elements, function(i, el) { $.each(axis, function(j, ax) { $(el).attr('data-' + ax, data[turnAxis][oppositeDirection][level][i][ax]); }); }); }; /** * @jsdoc function * @name rubics.performTurn * @description * performes the turn. * allows a callback when the turn is done */ var performTurn = function(rotate3d, turnAxis, direction, callback) { var degree = direction === 'right' ? 90 : -90; $('.grip').find('.axis-grip:first').css({ transform: 'rotate3d(' + rotate3d[turnAxis] + degree + 'deg)' }).one('transitionend', callback); }; /** * @jsdoc function * @name rubics.rotateParts * @description * rotates the parts */ var rotateParts = function(rotate3d, turnAxis, direction) { $('.grip .cube-part-wrapper').each(function(i, el) { var degree = direction === 'right' ? 90 : -90; var css = $(el).find('.axis-part')[0].style.transform; css = css === 'none' ? '' : css; css = 'rotate3d(' + rotate3d[turnAxis] + degree + 'deg) ' + css; $(el).find('.axis-part').css({ transform: css }); }); }; /** * @jsdoc function * @name rubics.attachParts * @description * puts the parts back into the cube */ var attachParts = function(turnAxis, level) { $('[data-' + turnAxis + '=' + level + ']') .appendTo('.cube'); }; /** * @jsdoc function * @name rubics.detachParts * @description * puts the parts into the grip */ var detachParts = function(turnAxis, level) { $('[data-' + turnAxis + '=' + level + ']') .appendTo('.grip .axis-grip'); }; /** * @jsdoc function * @name rubics.autoTurn * @description * automatically turn */ var autoTurn = function(turnAxis, level, direction) { if (!canvas.block) { canvas.block = true; turnAxis = turnAxis || 'x'; level = level || 0; detachParts(turnAxis, level); performTurn(rotate3d, turnAxis, direction, function() { rotateParts(rotate3d, turnAxis, direction); attachParts(turnAxis, level); clearHelpers(); positionParts(turnAxis, level, direction); window.setTimeout(function() { canvas.block = false; }, 2); }); } else { return; } }; /** * @jsdoc function * @name rubics.scrambleCube * @description * scramble the cube */ var scrambleCube = function(n) { var axis = ['x', 'y', 'z']; var direction = ['left', 'right']; $gripAxis.addClass('fast'); var duration = $gripAxis.css('transition-duration'); duration = (parseFloat(duration) + 0.1) * 1000; var play = setInterval(function() { var dir = direction[randomNumber(0, 1)]; var axi = axis[randomNumber(0, 2)]; var level = randomNumber(0, 2); dir = cache.dir === dir ? (dir === 'left' ? 'right' : 'left') : dir; axi = cache.axi === axi ? (axi === 'x' ? 'y' : 'z') : axi; axi = cache.axi === axi ? (axi === 'z' ? 'x' : 'y') : axi; axi = cache.axi === axi ? (axi === 'y' ? 'z' : 'x') : axi; level = level === 1 ? randomNumber(0, 2) : level; level = level === 1 ? 2 : level; level = cache.level === level ? (level === 0 ? 2 : 0) : level; level = cache.level === level ? (level === 2 ? 0 : 2) : level; cache = { dir: dir, axi: axi, level: level }; autoTurn(axi, level, dir); }, duration); setTimeout(function() { $gripAxis.removeClass('fast'); if (play) { clearTimeout(play); } }, duration * n); }; /** * @jsdoc function * @name rubics.releaseSwiper * @description * release the Swiper */ var releaseSwiper = function(e) { if (canvas.swiper && canvas.swiper.play) { canvas.swiper.play = false; if (!canvas.swiper.move) { return false; } canvas.swiper.move = false; if (canvas.swiper.degree >= -30 && canvas.swiper.degree <= 30) { $gripAxis.removeClass('manual').css({ transform: 'rotate3d(0,0,0,0deg)' }).one('transitionend', function() { attachParts(canvas.swiper.axis, canvas.swiper.level); clearHelpers(); }); } else { var direction = canvas.swiper.degree > 0 ? 'right' : 'left'; $gripAxis.removeClass('manual').css({ transform: 'rotate3d(' + rotate3d[canvas.swiper.axis] + (canvas.swiper.degree > 0 ? '90' : '-90') + 'deg)' }).one('transitionend', function() { rotateParts(rotate3d, canvas.swiper.axis, direction); attachParts(canvas.swiper.axis, canvas.swiper.level); clearHelpers(); positionParts(canvas.swiper.axis, canvas.swiper.level, direction); canvas.swiper = false; }); } } }; /** * @jsdoc function * @name rubics.moveSwiper * @description * movement on the the Swiper */ var moveSwiper = function(e) { if (canvas.swiper && canvas.swiper.play) { e.preventDefault(); canvas.swiper.move = { 'x': e.offsetX || e.originalEvent.layerX, 'y': e.offsetY || e.originalEvent.layerY }; canvas.swiper.distance = {}; canvas.swiper.distance.x = (canvas.swiper.start.x - canvas.swiper.move.x) / canvas.swiper.size.x * 90; canvas.swiper.distance.y = (canvas.swiper.start.y - canvas.swiper.move.y) / canvas.swiper.size.x * 90; if (!canvas.swiper.active && (canvas.swiper.distance.x > canvas.threshold || canvas.swiper.distance.x < -1 * canvas.threshold)) { canvas.swiper.axis = canvas.swiper.sides.x; canvas.swiper.degree = (canvas.swiper.start.x - canvas.swiper.move.x) / canvas.swiper.size.x * 90; canvas.swiper.side = 'y'; canvas.swiper.turn = 'x'; canvas.swiper.active = true; } else if (!canvas.swiper.active && (canvas.swiper.distance.y > canvas.threshold || canvas.swiper.distance.y < -1 * canvas.threshold)) { canvas.swiper.axis = canvas.swiper.sides.y; canvas.swiper.side = 'x'; canvas.swiper.turn = 'y'; canvas.swiper.active = true; } if (canvas.swiper.axis) { if (!canvas.swiper.init) { canvas.swiper.init = true; if (canvas.swiper.delta[canvas.swiper.side] < 1.5) { canvas.swiper.level = canvas.swiper.side === 'x' ? 0 : 2; canvas.swiper.level = canvas.swiper.side === 'y' && canvas.swiper.control === 'right' ? 0 : canvas.swiper.level; canvas.swiper.level = canvas.swiper.side === 'x' && canvas.swiper.control === 'front' ? 2 : canvas.swiper.level; canvas.swiper.level = canvas.swiper.side === 'x' && canvas.swiper.control === 'bottom' ? 2 : canvas.swiper.level; canvas.swiper.level = canvas.swiper.controls === 'front' && canvas.swiper.side === 'x' ? 0 : canvas.swiper.level; } else if (canvas.swiper.delta[canvas.swiper.side] < 3) { return false; // can't turn ceter slice canvas.swiper.level = 1; } else { canvas.swiper.level = canvas.swiper.side === 'x' ? 2 : 0; canvas.swiper.level = canvas.swiper.side === 'y' && canvas.swiper.control === 'right' ? 2 : canvas.swiper.level; canvas.swiper.level = canvas.swiper.side === 'x' && canvas.swiper.control === 'front' ? 0 : canvas.swiper.level; canvas.swiper.level = canvas.swiper.side === 'x' && canvas.swiper.control === 'bottom' ? 0 : canvas.swiper.level; } detachParts(canvas.swiper.axis, canvas.swiper.level); $gripAxis .addClass('manual'); } var factor = 1; factor = canvas.swiper.side === 'x' && canvas.swiper.control === 'front' ? -1 : factor; factor = canvas.swiper.side === 'y' && canvas.swiper.control === 'right' ? -1 : factor; factor = canvas.swiper.side === 'x' && canvas.swiper.control === 'bottom' ? -1 : factor; canvas.swiper.degree = (canvas.swiper.start[canvas.swiper.turn] - canvas.swiper.move[canvas.swiper.turn]) / canvas.swiper.size[canvas.swiper.side] * 90 * factor; $gripAxis.css({ transform: 'rotate3d(' + rotate3d[canvas.swiper.axis] + canvas.swiper.degree + 'deg)' }); } } }; /** * @jsdoc function * @name rubics.initSwiper * @description * init the Swiper */ var initSwiper = function(e) { canvas.swiper = {}; canvas.swiper.control = $(this).data('control'); canvas.swiper.play = true; canvas.swiper.sides = { 'x': $(this).data('x'), 'y': $(this).data('y') }; canvas.swiper.size = { 'x': e.target.clientWidth, 'y': e.target.clientHeight }; canvas.swiper.start = { 'x': e.offsetX || e.originalEvent.layerX, 'y': e.offsetY || e.originalEvent.layerY }; canvas.swiper.delta = { 'x': canvas.swiper.size.x / canvas.swiper.start.x, 'y': canvas.swiper.size.y / canvas.swiper.start.y }; }; /** * @jsdoc function * @name rubics.moveCube * @description * rotates the cube itself */ var moveCube = function(e) { if (!canvas.down) { return false; } e.preventDefault(); var x = (e.pageX - canvas['mouse']['x']) / 4; var y = (e.pageY - canvas['mouse']['y']) / -4; var transformation = ''; if ((x > canvas.threshold || x < -1 * canvas.threshold) && canvas['axis'] !== 'x') { canvas['axis'] = 'y'; transformation += 'rotate3d(0, 1, 0, '; transformation += x * cubeRotationSpeed; transformation += 'deg) '; transformation += canvas['css']; canvas['mouse']['distance'] = x; canvas.moved = true; } else if ((y > canvas.threshold || y < -1 * canvas.threshold) && canvas['axis'] !== 'y') { canvas['axis'] = 'x'; transformation += 'rotate3d(1, 0, 0, '; transformation += y * cubeRotationSpeed; transformation += 'deg) '; transformation += canvas['css']; canvas['mouse']['distance'] = y; canvas.moved = true; } else { canvas.moved = false; return false; } if (canvas.moved) { $('.cube-wrapper').css({ transform: transformation }); } }; /** * @jsdoc function * @name rubics.releaseCuber * @description * release the Cube */ var releaseCube = function(e) { if (canvas.down) { canvas.down = false; if (!canvas.moved) { return false; } canvas.moved = false; canvas['mouse']['end'] = +new Date(); canvas['mouse']['time'] = canvas['mouse']['end'] - canvas['mouse']['start']; canvas['mouse']['bouce'] = (canvas['mouse']['distance'] / canvas['mouse']['time']) * 100; canvas['css'] = $('.cube-wrapper')[0].style.transform; canvas['mouse']['bouce'] = Math.abs(canvas['mouse']['bouce']) <= 5 ? 0 : canvas['mouse']['bouce']; $('.cube-wrapper').css({ transitionDuration: Math.min(Math.abs(canvas['mouse']['bouce'] * 20), 300) + 'ms', transform: 'rotate3d(' + rotate3d[canvas['axis']] + canvas['mouse']['bouce'] * cubeRotationSpeed + 'deg) ' + canvas['css'] }).one('transitionend', function() { $('.cube-wrapper').css({ transitionDuration: '' }); }); } }; /** * @jsdoc function * @name rubics.onMouseDown * @description * check where we are then perform cubeRotation * if not on buttons or cube */ var onMouseDown = function(e) { e.preventDefault(); if ($(e.target).is('.swiper') || $(e.target).closest('.controls').length) { return false; } canvas.down = true; canvas['axis'] = false; canvas['mouse']['x'] = e.pageX; canvas['mouse']['y'] = e.pageY; canvas['css'] = $('.cube-wrapper')[0].style.transform; canvas['mouse']['start'] = +new Date(); }; $(function() { var $themer = $('.themer'); var $canvas = $('.canvas'); $gripAxis = $('.grip').find('.axis-grip:first'); $(document) .on('mousedown', onMouseDown) .on('mouseup', releaseCube) .on('mousemove', moveCube); $('.swiper') .on('mousedown', initSwiper) .on('mouseleave mouseup', releaseSwiper) .on('mousemove', moveSwiper); $('.themer') .on('click', function() { var theme = $(this).data('theme'); $canvas.removeClass(classWithPrefix(/^theme-/)); $themer.removeClass('selected'); $canvas.addClass('theme-' + theme); $(this).addClass('selected'); }); $('.scrambler') .on('click', function() { scrambleCube(30); }); });
})(window.jQuery, window, document);
RubiCSS cube - Script Codes
RubiCSS cube - Script Codes
Home Page Home
Developer Gregor Adams
Username pixelass
Uploaded June 20, 2022
Rating 4.5
Size 12,148 Kb
Views 74,888
Do you need developer help for RubiCSS cube?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Gregor Adams (pixelass) Script Codes
Name
Pure CSS marching ants border
Diagonal scroll
Cantor Set in CSS
Google dots animation
SVG sine wave
Numbers cube counter
Fractal tree
Fractal curve generator
Material design upload button with progress
3D Particle Heart
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!