{"id":16,"date":"2020-12-04T19:45:00","date_gmt":"2020-12-04T17:45:00","guid":{"rendered":"https:\/\/html-online.com\/articles\/?p=16"},"modified":"2026-03-01T12:13:43","modified_gmt":"2026-03-01T10:13:43","slug":"html5-rubiks-cube","status":"publish","type":"post","link":"https:\/\/html-online.com\/articles\/html5-rubiks-cube\/","title":{"rendered":"HTML5 Rubik’s Cube"},"content":{"rendered":"

\"html5 The Rubik’s Cube is a three-dimensional mechanical twisty puzzle, invented more than 40 yars ago in Hungary by Erno Rubik. It is estimated that more than 350.00 cubes were sold, making this simple yet so hard toy the most famous puzzle game of the World so I think there’s no need to describe it in more detail.<\/strong>
\n
\nThe most advanced online 3D Cube simulator with mouse controls can be found at the Rubik’s Cube website<\/a>.
\nWhen it comes to modelling this cube on the web we can use a canvas or simply build the 54 little colored faces using rotated and transformed div elements in HTML5 and CSS3. There are for example online Rubik’s Cube solvers<\/a> where the visitor inputs the colors of the scrambled cube and the program throws out the rotations needed to get the cube fixed. A HTML5 Rubik’s Cube can be used to demonstrate nice patterns, scrambles or we might want to build our own online Magic Cube to play with.<\/p>\n

To start building our HTML5 Rubik’s Cube<\/a> we have to define the “stickers of the cube” as 54 divs. We will have to position them one by one so we assign a custom field ID to each one of them and a color marker. According to the color scheme of the Rubik’s Cube, there are 6 different colors.<\/strong><\/strong><\/p>\n

<\/strong><\/strong><\/p>\n

<\/strong><\/strong><\/p>\n

<\/p>\n

<div<\/span> id<\/span>=\"cubeFields\"<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field1 color6\"<\/span>><\/span><span<\/span>><\/span>1<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field2 color6\"<\/span>><\/span><span<\/span>><\/span>2<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field3 color6\"<\/span>><\/span><span<\/span>><\/span>3<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field4 color6\"<\/span>><\/span><span<\/span>><\/span>4<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field5 color6\"<\/span>><\/span><span<\/span>><\/span>5<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field6 color6\"<\/span>><\/span><span<\/span>><\/span>6<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field7 color6\"<\/span>><\/span><span<\/span>><\/span>7<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field8 color6\"<\/span>><\/span><span<\/span>><\/span>8<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field9 color6\"<\/span>><\/span><span<\/span>><\/span>9<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field10 color3\"<\/span>><\/span><span<\/span>><\/span>10<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field11 color3\"<\/span>><\/span><span<\/span>><\/span>11<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field12 color3\"<\/span>><\/span><span<\/span>><\/span>12<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field13 color3\"<\/span>><\/span><span<\/span>><\/span>13<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field14 color3\"<\/span>><\/span><span<\/span>><\/span>14<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field15 color3\"<\/span>><\/span><span<\/span>><\/span>15<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field16 color3\"<\/span>><\/span><span<\/span>><\/span>16<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field17 color3\"<\/span>><\/span><span<\/span>><\/span>17<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field18 color3\"<\/span>><\/span><span<\/span>><\/span>18<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field19 color2\"<\/span>><\/span><span<\/span>><\/span>19<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field20 color2\"<\/span>><\/span><span<\/span>><\/span>20<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field21 color2\"<\/span>><\/span><span<\/span>><\/span>21<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field22 color2\"<\/span>><\/span><span<\/span>><\/span>22<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field23 color2\"<\/span>><\/span><span<\/span>><\/span>23<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field24 color2\"<\/span>><\/span><span<\/span>><\/span>24<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field25 color2\"<\/span>><\/span><span<\/span>><\/span>25<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field26 color2\"<\/span>><\/span><span<\/span>><\/span>26<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field27 color2\"<\/span>><\/span><span<\/span>><\/span>27<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field28 color5\"<\/span>><\/span><span<\/span>><\/span>28<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field29 color5\"<\/span>><\/span><span<\/span>><\/span>29<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field30 color5\"<\/span>><\/span><span<\/span>><\/span>30<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field31 color5\"<\/span>><\/span><span<\/span>><\/span>31<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field32 color5\"<\/span>><\/span><span<\/span>><\/span>32<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field33 color5\"<\/span>><\/span><span<\/span>><\/span>33<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field34 color5\"<\/span>><\/span><span<\/span>><\/span>34<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field35 color5\"<\/span>><\/span><span<\/span>><\/span>35<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field36 color5\"<\/span>><\/span><span<\/span>><\/span>36<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field37 color4\"<\/span>><\/span><span<\/span>><\/span>37<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field38 color4\"<\/span>><\/span><span<\/span>><\/span>38<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field39 color4\"<\/span>><\/span><span<\/span>><\/span>39<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field40 color4\"<\/span>><\/span><span<\/span>><\/span>40<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field41 color4\"<\/span>><\/span><span<\/span>><\/span>41<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field42 color4\"<\/span>><\/span><span<\/span>><\/span>42<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field43 color4\"<\/span>><\/span><span<\/span>><\/span>43<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field44 color4\"<\/span>><\/span><span<\/span>><\/span>44<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field45 color4\"<\/span>><\/span><span<\/span>><\/span>45<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field46 color1\"<\/span>><\/span><span<\/span>><\/span>46<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field47 color1\"<\/span>><\/span><span<\/span>><\/span>47<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field48 color1\"<\/span>><\/span><span<\/span>><\/span>48<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field49 color1\"<\/span>><\/span><span<\/span>><\/span>49<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field50 color1\"<\/span>><\/span><span<\/span>><\/span>50<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field51 color1\"<\/span>><\/span><span<\/span>><\/span>51<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field52 color1\"<\/span>><\/span><span<\/span>><\/span>52<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field53 color1\"<\/span>><\/span><span<\/span>><\/span>53<\/span<\/span>><\/span><\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"field54 color1\"<\/span>><\/span><span<\/span>><\/span>54<\/span<\/span>><\/span><\/div<\/span>><\/span>\n<\/div<\/span>><\/span>\n<\/pre>\n
To set up the stylesheet let’s define the colors of the stickers first:<\/p>\n
.color1<\/span>{    background-color<\/span>: #FFFFFF<\/span>;  }   \n.color2<\/span>{    background-color<\/span>: #FF6907<\/span>;  }   \n.color3<\/span>{    background-color<\/span>: #00A75D<\/span>;  }   \n.color4<\/span>{    background-color<\/span>: #B60101<\/span>;  }\n.color5<\/span>{    background-color<\/span>: #213DFD<\/span>;  }\n.color6<\/span>{    background-color<\/span>: #FFD500<\/span>;  }\n<\/pre>\n
Define the size of the fields, setting the black border.<\/p>\n
#cubeFields<\/span> > div<\/span> {\n    position<\/span>: absolute<\/span>;\n    width<\/span>: 26px<\/span><\/span>;\n    height<\/span>: 26px<\/span><\/span>;\n    border<\/span>: 2px<\/span><\/span> solid<\/span> #000<\/span>;\n}\n<\/pre>\n
I marked every field with a number which makes the items distinguishable, you can either delete these span tags from the HTML or just simply set them to display:none.<\/p>\n
#cubeFields<\/span> span<\/span> {\n    display<\/span>: none<\/span>;\n}\n<\/pre>\n
It’s time to define the inidividual position of each little field and translate\/rotate them accordingly. I have added the browser prefixes only for the first fiels to keep this article short.<\/p>\n
.field1<\/span> {\n    transform: rotateX(-90deg<\/span><\/span>) translateX(0px<\/span><\/span>) translateY(30px<\/span><\/span>) translateZ(-60px<\/span><\/span>);\n    -moz-transform: rotateX(-90deg<\/span><\/span>) translateX(0px<\/span><\/span>) translateY(30px<\/span><\/span>) translateZ(-60px<\/span><\/span>);\n    -webkit-transform: rotateX(-90deg<\/span><\/span>) translateX(0px<\/span><\/span>) translateY(30px<\/span><\/span>) translateZ(-60px<\/span><\/span>);\n}\n.field2<\/span> {   transform: rotateX(-90deg<\/span><\/span>) translateX(30px<\/span><\/span>) translateY(30px<\/span><\/span>) translateZ(-60px<\/span><\/span>); }\n.field3<\/span> {   transform: rotateX(-90deg<\/span><\/span>) translateX(60px<\/span><\/span>) translateY(30px<\/span><\/span>) translateZ(-60px<\/span><\/span>); }\n.field4<\/span> {   transform: rotateX(-90deg<\/span><\/span>) translateX(0px<\/span><\/span>) translateY(0px<\/span><\/span>) translateZ(-60px<\/span><\/span>); }\n.field5<\/span> {   transform: rotatex(-90deg<\/span><\/span>) translateX(30px<\/span><\/span>) translateY(0px<\/span><\/span>) translateZ(-60px<\/span><\/span>); }\n.field6<\/span> {   transform: rotateX(-90deg<\/span><\/span>) translateX(60px<\/span><\/span>) translateY(0px<\/span><\/span>) translateZ(-60px<\/span><\/span>); }\n.field7<\/span> {   transform: rotateX(-90deg<\/span><\/span>) translateX(0px<\/span><\/span>) translateY(-30px<\/span><\/span>) translateZ(-60px<\/span><\/span>); }\n.field8<\/span> {   transform: rotateX(-90deg<\/span><\/span>) translateX(30px<\/span><\/span>) translateY(-30px<\/span><\/span>) translateZ(-60px<\/span><\/span>); }\n.field9<\/span> {   transform: rotateX(-90deg<\/span><\/span>) translateX(60px<\/span><\/span>) translateY(-30px<\/span><\/span>) translateZ(-60px<\/span><\/span>); }\n.field10<\/span> {  transform: rotateY(-90deg<\/span><\/span>) translateX(-30px<\/span><\/span>) translateY(-45px<\/span><\/span>) translateZ(15px<\/span><\/span>); }\n.field11<\/span> {  transform: rotateY(-90deg<\/span><\/span>) translateX(0px<\/span><\/span>) translateY(-45px<\/span><\/span>) translateZ(15px<\/span><\/span>); }\n.field12<\/span> {  transform: rotateY(-90deg<\/span><\/span>) translateX(30px<\/span><\/span>) translateY(-45px<\/span><\/span>) translateZ(15px<\/span><\/span>); }\n.field13<\/span> {  transform: rotateY(-90deg<\/span><\/span>) translateX(-30px<\/span><\/span>) translateY(-15px<\/span><\/span>) translateZ(15px<\/span><\/span>); }\n.field14<\/span> {  transform: rotateY(-90deg<\/span><\/span>) translateX(0px<\/span><\/span>) translateY(-15px<\/span><\/span>) translateZ(15px<\/span><\/span>); }\n.field15<\/span> {  transform: rotateY(-90deg<\/span><\/span>) translateX(30px<\/span><\/span>) translateY(-15px<\/span><\/span>) translateZ(15px<\/span><\/span>); }\n.field16<\/span> {  transform: rotateY(-90deg<\/span><\/span>) translateX(-30px<\/span><\/span>) translateY(15px<\/span><\/span>) translateZ(15px<\/span><\/span>); }\n.field17<\/span> {  transform: rotateY(-90deg<\/span><\/span>) translateX(0px<\/span><\/span>) translateY(15px<\/span><\/span>) translateZ(15px<\/span><\/span>); }\n.field18<\/span> {  transform: rotateY(-90deg<\/span><\/span>) translateX(+30px<\/span><\/span>) translateY(15px<\/span><\/span>) translateZ(15px<\/span><\/span>); }\n.field19<\/span> {  transform: translateX(0px<\/span><\/span>) translateY(-45px<\/span><\/span>) translateZ(45px<\/span><\/span>); }\n.field20<\/span> {  transform: translateX(30px<\/span><\/span>) translateY(-45px<\/span><\/span>) translateZ(45px<\/span><\/span>); }\n.field21<\/span> {  transform: translateX(60px<\/span><\/span>) translateY(-45px<\/span><\/span>) translateZ(45px<\/span><\/span>); }\n.field22<\/span> {  transform: translateX(0px<\/span><\/span>) translateY(-15px<\/span><\/span>) translateZ(45px<\/span><\/span>); }\n.field23<\/span> {  transform: translateX(30px<\/span><\/span>) translateY(-15px<\/span><\/span>) translateZ(45px<\/span><\/span>); }\n.field24<\/span> {  transform: translateX(60px<\/span><\/span>) translateY(-15px<\/span><\/span>) translateZ(45px<\/span><\/span>); }\n.field25<\/span> {  transform: translateX(0px<\/span><\/span>) translateY(15px<\/span><\/span>) translateZ(45px<\/span><\/span>); }\n.field26<\/span> {  transform: translateX(30px<\/span><\/span>) translateY(15px<\/span><\/span>) translateZ(45px<\/span><\/span>);  \n.field27 {  transform: translateX(60px<\/span><\/span>) translateY(15px<\/span><\/span>) translateZ(45px<\/span><\/span>); }\n.field28<\/span> {  transform: rotateY(-90deg<\/span><\/span>) translateX(30px<\/span><\/span>) translateY(-45px<\/span><\/span>) translateZ(-75px<\/span><\/span>); }\n.field29<\/span> {  transform: rotateY(-90deg<\/span><\/span>) translateX(0px<\/span><\/span>) translateY(-45px<\/span><\/span>) translateZ(-75px<\/span><\/span>); }\n.field30<\/span> {  transform: rotateY(-90deg<\/span><\/span>) translateX(-30px<\/span><\/span>) translateY(-45px<\/span><\/span>) translateZ(-75px<\/span><\/span>); }\n.field31<\/span> {  transform: rotateY(-90deg<\/span><\/span>) translateX(30px<\/span><\/span>) translateY(-15px<\/span><\/span>) translateZ(-75px<\/span><\/span>); }\n.field32<\/span> {  transform: rotateY(-90deg<\/span><\/span>) translateX(0px<\/span><\/span>) translateY(-15px<\/span><\/span>) translateZ(-75px<\/span><\/span>); }\n.field33<\/span> {  transform: rotateY(-90deg<\/span><\/span>) translateX(-30px<\/span><\/span>) translateY(-15px<\/span><\/span>) translateZ(-75px<\/span><\/span>); }\n.field34<\/span> {  transform: rotateY(-90deg<\/span><\/span>) translateX(30px<\/span><\/span>) translateY(15px<\/span><\/span>) translateZ(-75px<\/span><\/span>); }\n.field35<\/span> {  transform: rotateY(-90deg<\/span><\/span>) translateX(0px<\/span><\/span>) translateY(15px<\/span><\/span>) translateZ(-75px<\/span><\/span>); }\n.field36<\/span> {  transform: rotateY(-90deg<\/span><\/span>) translateX(-30px<\/span><\/span>) translateY(15px<\/span><\/span>) translateZ(-75px<\/span><\/span>); }\n.field37<\/span> {  transform: translateX(60px<\/span><\/span>) translateY(-45px<\/span><\/span>) translateZ(-45px<\/span><\/span>); }\n.field38<\/span> {  transform: translateX(30px<\/span><\/span>) translateY(-45px<\/span><\/span>) translateZ(-45px<\/span><\/span>); }\n.field39<\/span> {  transform: translateX(0px<\/span><\/span>) translateY(-45px<\/span><\/span>) translateZ(-45px<\/span><\/span>); }\n.field40<\/span> {  transform: translateX(60px<\/span><\/span>) translateY(-15px<\/span><\/span>) translateZ(-45px<\/span><\/span>); }\n.field41<\/span> {  transform: translateX(30px<\/span><\/span>) translateY(-15px<\/span><\/span>) translateZ(-45px<\/span><\/span>); }\n.field42<\/span> {  transform: translateX(0px<\/span><\/span>) translateY(-15px<\/span><\/span>) translateZ(-45px<\/span><\/span>); }\n.field43<\/span> {  transform: translateX(60px<\/span><\/span>) translateY(15px<\/span><\/span>) translateZ(-45px<\/span><\/span>); }\n.field44<\/span> {  transform: translateX(30px<\/span><\/span>) translateY(15px<\/span><\/span>) translateZ(-45px<\/span><\/span>); }\n.field45<\/span> {  transform: translateX(0px<\/span><\/span>) translateY(15px<\/span><\/span>) translateZ(-45px<\/span><\/span>); }\n.field46<\/span> {  transform: rotateX(-90deg<\/span><\/span>) translateX(0px<\/span><\/span>) translateY(-30px<\/span><\/span>) translateZ(30px<\/span><\/span>); }\n.field47<\/span> {  transform: rotateX(-90deg<\/span><\/span>) translateX(30px<\/span><\/span>) translateY(-30px<\/span><\/span>) translateZ(30px<\/span><\/span>); }\n.field48<\/span> {  transform: rotateX(-90deg<\/span><\/span>) translateX(60px<\/span><\/span>) translateY(-30px<\/span><\/span>) translateZ(30px<\/span><\/span>); }\n.field49<\/span> {  transform: rotateX(-90deg<\/span><\/span>) translateX(0px<\/span><\/span>) translateY(0px<\/span><\/span>) translateZ(30px<\/span><\/span>); }\n.field50<\/span> {  transform: rotateX(-90deg<\/span><\/span>) translateX(30px<\/span><\/span>) translateY(0px<\/span><\/span>) translateZ(30px<\/span><\/span>); }\n.field51<\/span> {  transform: rotateX(-90deg<\/span><\/span>) translateX(60px<\/span><\/span>) translateY(0px<\/span><\/span>) translateZ(30px<\/span><\/span>); }\n.field52<\/span> {  transform: rotateX(-90deg<\/span><\/span>) translateX(0px<\/span><\/span>) translateY(30px<\/span><\/span>) translateZ(30px<\/span><\/span>); }\n.field53<\/span> {  transform: rotateX(-90deg<\/span><\/span>) translateX(30px<\/span><\/span>) translateY(30px<\/span><\/span>) translateZ(30px<\/span><\/span>); }\n.field54<\/span> {  transform: rotateX(-90deg<\/span><\/span>) translateX(60px<\/span><\/span>) translateY(30px<\/span><\/span>) translateZ(30px<\/span><\/span>); }\n<\/pre>\n
Rendering error in Mozzilla Firefox:
\n\"html5-rubiks-cube-mozzilla\"<\/p>\n
The lates Internet Explorer 11 doesn’t support the CSS3 rotate transformation and this is how it renders the cube. Fortunately this has been fixed in Edge.
\n\"html5-rubiks-cube-render-ie\"<\/p>\n
To get more inspiration check out this HTML5 Rubik’s Cube<\/a> where you can generate little cube widgets to demonstrate rotations and algorithms.<\/p>\n
<\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"
The Rubik’s Cube is a three-dimensional mechanical twisty puzzle, invented more than 40 yars ago in Hungary by Erno Rubik. It is estimated that more than 350.00 cubes were sold, making this simple yet so hard toy the most famous puzzle game of the World so I think there’s no need to describe it in … Continue reading “HTML5 Rubik’s Cube”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,4],"tags":[],"class_list":["post-16","post","type-post","status-publish","format-standard","hentry","category-css","category-html"],"yoast_head":"\nHTML5 CSS3 Rubik's Cube - Without Canvas<\/title>\n<meta name=\"description\" content=\"To start building our HTML5 Rubik's Cube we have to define the "stickers of the cube" as 54 divs. We will have to position them one by one so we assign a\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/html-online.com\/articles\/html5-rubiks-cube\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML5 CSS3 Rubik's Cube - Without Canvas\" \/>\n<meta property=\"og:description\" content=\"To start building our HTML5 Rubik's Cube we have to define the "stickers of the cube" as 54 divs. We will have to position them one by one so we assign a\" \/>\n<meta property=\"og:url\" content=\"https:\/\/html-online.com\/articles\/html5-rubiks-cube\/\" \/>\n<meta property=\"og:site_name\" content=\"HTML Online\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/htmlcoding\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-12-04T17:45:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-01T10:13:43+00:00\" \/>\n<meta name=\"author\" content=\"HTML Editor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"HTML Editor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/html-online.com\/articles\/html5-rubiks-cube\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/html-online.com\/articles\/html5-rubiks-cube\/\"},\"author\":{\"name\":\"HTML Editor\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d\"},\"headline\":\"HTML5 Rubik’s Cube\",\"datePublished\":\"2020-12-04T17:45:00+00:00\",\"dateModified\":\"2026-03-01T10:13:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/html-online.com\/articles\/html5-rubiks-cube\/\"},\"wordCount\":370,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/html-online.com\/articles\/#organization\"},\"articleSection\":[\"CSS\",\"HTML\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/html-online.com\/articles\/html5-rubiks-cube\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/html-online.com\/articles\/html5-rubiks-cube\/\",\"url\":\"https:\/\/html-online.com\/articles\/html5-rubiks-cube\/\",\"name\":\"HTML5 CSS3 Rubik's Cube - Without Canvas\",\"isPartOf\":{\"@id\":\"https:\/\/html-online.com\/articles\/#website\"},\"datePublished\":\"2020-12-04T17:45:00+00:00\",\"dateModified\":\"2026-03-01T10:13:43+00:00\",\"description\":\"To start building our HTML5 Rubik's Cube we have to define the \\\"stickers of the cube\\\" as 54 divs. We will have to position them one by one so we assign a\",\"breadcrumb\":{\"@id\":\"https:\/\/html-online.com\/articles\/html5-rubiks-cube\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/html-online.com\/articles\/html5-rubiks-cube\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/html-online.com\/articles\/html5-rubiks-cube\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/html-online.com\/articles\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML5 Rubik’s Cube\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/html-online.com\/articles\/#website\",\"url\":\"https:\/\/html-online.com\/articles\/\",\"name\":\"HTML Online Articles\",\"description\":\"Tips, tricks, tutorials\u2026\",\"publisher\":{\"@id\":\"https:\/\/html-online.com\/articles\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/html-online.com\/articles\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/html-online.com\/articles\/#organization\",\"name\":\"HTML Online\",\"url\":\"https:\/\/html-online.com\/articles\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg\",\"contentUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg\",\"width\":350,\"height\":350,\"caption\":\"HTML Online\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/htmlcoding\/\",\"https:\/\/www.linkedin.com\/in\/ferencdenes\/\",\"https:\/\/www.youtube.com\/channel\/UCn38Jw1sJzbjVHO95Zp0Sww\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d\",\"name\":\"HTML Editor\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g\",\"caption\":\"HTML Editor\"},\"description\":\"In 2013, while wrestling with a mountain of client articles and an uncooperative CMS, I decided enough was enough. So, I created an online HTML editor purely out of necessity (and mild frustration). What began as a tool for my own sanity quickly evolved into a gift for the world\u2014or at least for anyone trying to avoid breaking their website's code. Since then, I've shared my tech notes on my blog, which serves as both a handy reference and a digital diary of the adventures and misadventures of a coder.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/ferencdenes\/\",\"https:\/\/www.youtube.com\/@htmlg\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML5 CSS3 Rubik's Cube - Without Canvas","description":"To start building our HTML5 Rubik's Cube we have to define the \"stickers of the cube\" as 54 divs. We will have to position them one by one so we assign a","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/html-online.com\/articles\/html5-rubiks-cube\/","og_locale":"en_GB","og_type":"article","og_title":"HTML5 CSS3 Rubik's Cube - Without Canvas","og_description":"To start building our HTML5 Rubik's Cube we have to define the \"stickers of the cube\" as 54 divs. We will have to position them one by one so we assign a","og_url":"https:\/\/html-online.com\/articles\/html5-rubiks-cube\/","og_site_name":"HTML Online","article_publisher":"https:\/\/www.facebook.com\/htmlcoding\/","article_published_time":"2020-12-04T17:45:00+00:00","article_modified_time":"2026-03-01T10:13:43+00:00","author":"HTML Editor","twitter_card":"summary_large_image","twitter_misc":{"Written by":"HTML Editor","Estimated reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/html-online.com\/articles\/html5-rubiks-cube\/#article","isPartOf":{"@id":"https:\/\/html-online.com\/articles\/html5-rubiks-cube\/"},"author":{"name":"HTML Editor","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d"},"headline":"HTML5 Rubik’s Cube","datePublished":"2020-12-04T17:45:00+00:00","dateModified":"2026-03-01T10:13:43+00:00","mainEntityOfPage":{"@id":"https:\/\/html-online.com\/articles\/html5-rubiks-cube\/"},"wordCount":370,"commentCount":0,"publisher":{"@id":"https:\/\/html-online.com\/articles\/#organization"},"articleSection":["CSS","HTML"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/html-online.com\/articles\/html5-rubiks-cube\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/html-online.com\/articles\/html5-rubiks-cube\/","url":"https:\/\/html-online.com\/articles\/html5-rubiks-cube\/","name":"HTML5 CSS3 Rubik's Cube - Without Canvas","isPartOf":{"@id":"https:\/\/html-online.com\/articles\/#website"},"datePublished":"2020-12-04T17:45:00+00:00","dateModified":"2026-03-01T10:13:43+00:00","description":"To start building our HTML5 Rubik's Cube we have to define the \"stickers of the cube\" as 54 divs. We will have to position them one by one so we assign a","breadcrumb":{"@id":"https:\/\/html-online.com\/articles\/html5-rubiks-cube\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/html-online.com\/articles\/html5-rubiks-cube\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/html-online.com\/articles\/html5-rubiks-cube\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/html-online.com\/articles\/"},{"@type":"ListItem","position":2,"name":"HTML5 Rubik’s Cube"}]},{"@type":"WebSite","@id":"https:\/\/html-online.com\/articles\/#website","url":"https:\/\/html-online.com\/articles\/","name":"HTML Online Articles","description":"Tips, tricks, tutorials\u2026","publisher":{"@id":"https:\/\/html-online.com\/articles\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/html-online.com\/articles\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/html-online.com\/articles\/#organization","name":"HTML Online","url":"https:\/\/html-online.com\/articles\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/","url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg","contentUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg","width":350,"height":350,"caption":"HTML Online"},"image":{"@id":"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/htmlcoding\/","https:\/\/www.linkedin.com\/in\/ferencdenes\/","https:\/\/www.youtube.com\/channel\/UCn38Jw1sJzbjVHO95Zp0Sww"]},{"@type":"Person","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d","name":"HTML Editor","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g","caption":"HTML Editor"},"description":"In 2013, while wrestling with a mountain of client articles and an uncooperative CMS, I decided enough was enough. So, I created an online HTML editor purely out of necessity (and mild frustration). What began as a tool for my own sanity quickly evolved into a gift for the world\u2014or at least for anyone trying to avoid breaking their website's code. Since then, I've shared my tech notes on my blog, which serves as both a handy reference and a digital diary of the adventures and misadventures of a coder.","sameAs":["https:\/\/www.linkedin.com\/in\/ferencdenes\/","https:\/\/www.youtube.com\/@htmlg"]}]}},"_links":{"self":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/16","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/comments?post=16"}],"version-history":[{"count":3,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/16\/revisions"}],"predecessor-version":[{"id":2550,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/16\/revisions\/2550"}],"wp:attachment":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/media?parent=16"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/categories?post=16"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/tags?post=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}