JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>3d test</title>
<style type="text/css" media="all">
body,ul,li {
padding:0;
margin:0;
border:0;
}
body {
-webkit-user-select:none;
-webkit-text-size-adjust:none;
background-color:#FFF;
}
.wrapper {
position:absolute;
top:50%; left:50%;
margin-left:-50px; margin-top:-50px;
width:100px; height:100px;
-webkit-transform-style:preserve-3d;
-webkit-animation-name:rotate;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
-webkit-transform-origin:50% 50% 50px;
-webkit-perspective:1000;
}
.wrapper div {
position:absolute;
-webkit-backface-visibility:hidden;
width:150px; height:150px;
background:#ccc;
}
.wrapper.tex4 div {
}
.wrapper div {
position:absolute;
-webkit-backface-visibility:hidden;
width:100px; height:100px;
background-size:100px 100px;
}
.wrapper.tex2 div {
}
.wrapper.tex3 div {
}
.wrapper.tex4 div {
}
.side1 {
-webkit-transform:rotateY(90deg) rotateZ(-90deg) translate3d(0,0,100px);
-webkit-transform-origin:0 100% 0;
}
.side2 {
-webkit-transform:rotateY(-90deg) rotateZ(90deg) translate3d(0,-100px,0);
-webkit-transform-origin:0 0 0;
}
.side3 {
-webkit-transform:translate3d(0,0,100px);
}
.side4 {
-webkit-transform:rotateX(90deg) rotateZ(180deg) translate3d(100px,-100px,0);
-webkit-transform-origin:100% 0;
}
.side5 {
-webkit-transform:rotateX(-90deg);
-webkit-transform-origin:0 100%;
}
@-webkit-keyframes rotate {
from { -webkit-transform: rotateY(0) rotateX(0); }
...