JSFiddle - React, Tailwind, and code Playground

by fezec

HTML

<div id="wrapper">
  <div class="item is-selected" id="one">
    <p>Wiper Typography</p>
    <p>bokeh
      <br/>november,twelve</p>
  </div>http://jsfiddle.net/fezec/weHjN/9/#run
  <div class="item" id="two">
    <p>Wiper Typography</p>
    <p>bokeh
      <br/>november,twelve</p>
  </div>
  <div class="item" id="three">
    <p>Wiper Typography</p>
    <p>bokeh
      <br/>november,twelve</p>
  </div>
  <div class="item" id="four">
    <p>Wiper Typography</p>
    <p>bokeh
      <br/>november,twelve</p>
  </div>
  <div class="item" id="five">
    <p>Wiper Typography</p>
    <p>bokeh
      <br/>november,twelve</p>
  </div>
  <div class="item" id="six">
    <p>Wiper Typography</p>
    <p>bokeh
      <br/>november,twelve</p>
  </div>
  <div class="item" id="eight">
    <p>Wiper Typography</p>
    <p>bokeh
      <br/>november,twelve</p>
  </div>
  <div class="item" id="seven">
    <p>Wiper Typography</p>
    <p>bokeh
      <br/>november,twelve</p>
  </div>
  <div class="item" id="nine">
    <p>Wiper Typography</p>
    <p>bokeh
      <br/>november,twelve</p>
  </div>
  <div class="item" id="ten">
    <p>Wiper Typography</p>
    <p>bokeh
      <br/>november,twelve</p>
  </div>
</div>

SCSS

:root, #container {
  height:100%;
  width:100%;
  background:red;

}

body{
  overflow:hidden;
}

#wrapper{
  
  width:50%;
  height:100%;
  position:absolute;
  background:white;
}

.item.is-selected{
  background-color:green;
  z-index:100;
}

.item:nth-child(1){
 transform:rotate(0deg);
}.item:nth-child(2){
 transform:rotate(36deg);
}.item:nth-child(3){
 transform:rotate(72deg);
}.item:nth-child(4){
 transform:rotate(108deg);
}.item:nth-child(5){
 transform:rotate(144deg);
}.item:nth-child(6){
 transform:rotate(180deg);
}.item:nth-child(7){
 transform:rotate(216deg);
}.item:nth-child(8){
 transform:rotate(252deg);
}.item:nth-child(9){
 transform:rotate(288deg);
}.item:nth-child(10){
 transform:rotate(324deg);
}







/*.item:nth-child(1){  */
     /* transform:matrix3d(1,0,0,0,
                          0,Math.cos(a),Math.sin(-a),0,
                          0,Math.sin(a),Math.cos(a),0,
                          tx,ty,tz,1);*/

  
  
  /*  }*/
}


.item {

background:red;
  width:220px;
  height:310px;
  position:absolute;
  right:-110px;
 bottom:20%;
  transform-origin:50% 205%;
  
  

  
  p {
    color:white;
  }
  p:nth-child(1) {
  }
  p:nth-child(2) {
    transform:rotate(-90deg);
    position:relative;
    top:-200px;
  }
}

JavaScript

var total = 10;
var rotation = 360 / total;
var str = "";
var classs = ".item";
for (var i = 0; i < 10; i++) {
  var rot = i * rotation;
  /*  str += classs + ":nth-child(" + (i + 1) + "){\n transform:matrix3d(";
 
  str += (Math.cos(rot)*100 + " , " + Math.sin(-rot) + ",0,0,\n" + Math.sin(rot) + "," + Math.cos(rot) + ",0,0,\n0,0,1,0,\n0,0,0,1);\n");
*/
  str += classs + ":nth-child(" + (i + 1) + "){\n transform:rotate(" + (i * rotation) + "deg);\n}";

}
console.log(str);