A Pen by Benjamin.

3D-TagCloud-.markdown

3D TagCloud

SVG + CSS Transforms

A Pen by Benjamin on CodePen.

License.

index.html

<script src="http://www.jasondavies.com/d3.min.js"></script>
<script src="http://www.jasondavies.com/wordcloud/d3.layout.cloud.js"></script>

<div id="container">
  <div id="cube" class="animate">
    <div id="a" class="face"></div>
    <div id="b" class="face"></div>
    <div id="c" class="face"></div>
    <div id="d" class="face"></div>
    <div id="e" class="face"></div>
    <div id="f" class="face"></div>
  </div>
</div>

script.js

  var fill = d3.scale.category20();

  d3.layout.cloud().size([500, 500])
      .words([
        "Sed", "ut", "perspiciatis", "unde", "omnis", "iste", "natus", "error", "sit", "voluptatem", "accusantium", "doloremque", "laudantium,", "totam", "rem", "aperiam,", "eaque", "ipsa", "quae", "ab", "illo", "inventore", "veritatis", "et", "quasi", "architecto", "beatae", "vitae", "dicta", "sunt", "explicabo.", "Nemo", "enim", "ipsam", "voluptatem", "quia", "voluptas", "sit", "aspernatur", "aut", "odit", "aut", "fugit,", "sed", "quia", "consequuntur", "magni", "dolores", "eos", "qui", "ratione", "voluptatem", "sequi", "nesciunt.", "Neque", "porro", "quisquam", "est,", "qui", "dolorem", "ipsum", "quia", "dolor", "sit", "amet,", "consectetur,", "adipisci", "velit,", "sed", "quia", "non", "numquam", "eius", "modi", "tempora", "incidunt", "ut", "labore", "et", "dolore", "magnam", "aliquam", "quaerat", "voluptatem.", "Ut", "enim", "ad", "minima", "veniam,", "quis", "nostrum", "exercitationem", "ullam", "corporis", "suscipit", "laboriosam,", "nisi", "ut", "aliquid", "ex", "ea", "commodi", "consequatur?", "Quis", "autem", "vel", "eum", "iure", "reprehenderit", "qui", "in", "ea", "voluptate", "velit", "esse", "quam", "nihil", "molestiae", "consequatur,", "vel", "illum", "qui", "dolorem", "eum", "fugiat", "quo", "voluptas", "nulla", "pariatur"].map(function(d) {
        return {text: d, size: 10 + Math.random() * 90};
      }))
      .padding(5)
      .rotate(function() { return ~~(Math.random() * 2) * 90; })
      .font("Impact")
      .fontSize(function(d) { return d.size; })
      .on("end", draw)
      .start();

  function draw(words) {
    var faces = ['a','b','c','d','e','f'];
    for(var face in faces)
    {
      console.log(face)
    d3.select("#"+faces[face]).append("svg")
        .attr("width", 500)
        .attr("height", 500)
      .append("g")
        .attr("transform", "translate(150,150)")
      .selectAll("text")
        .data(words)
      .enter().append("text")
        .style("font-size", function(d) { return d.size + "px"; })
        .style("font-family", "Impact")
        .style("fill", function(d, i) { return fill(i); })
        .attr("text-anchor", "middle")
        .attr("transform", function(d) {
          return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
        })
        .text(function(d) { return d.text; });
  }
  }

style.less

body {
     margin-top: 125px;
 }

@keyframes spinningH {
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }
  to{
    transform: rotateX(360deg) rotateY(360deg);
  }
}

 #container {
  perspective: 1000px;
  perspective-origin: 50% 50%;
 }

.animate {
  animation: spinningH 6s infinite linear;
}

#cube {
  position: relative;
  margin: 0 auto;
  height: 400px;
  width: 400px;

  -webkit-transition: -webkit-transform 2s linear;
  transition: transform 2s linear;
  transform-style: preserve-3d;
}

#cube>div {
  position: absolute;
  height: 360px;
  width: 360px;
  padding: 20px;
  opacity: 0.9;
  background-position: center center;
}

#cube div:nth-child(1) {
  transform         : translateZ(200px);
  background-color  : transparent;
  background-image: url();
  background-repeat : no-repeat;
}
#cube div:hover {
  background-color  : #00ff00;
}
#cube div:nth-child(2) {
  transform         : rotateY(90deg) translateZ(200px);
  background-color  : transparent;
  background-image: url();
  background-repeat : no-repeat;
}

#cube div:nth-child(3) {
  transform         : rotateY(180deg) translateZ(200px);
  background-color  : transparent;
  background-image: url();
  background-repeat : no-repeat;
}

#cube div:nth-child(4) {
  transform         : rotateY(-90deg) translateZ(200px);
  background-color  : transparent;
  background-image  : url();
  background-repeat : no-repeat;
}

#cube div:nth-child(5) {
  transform         : rotateX(-90deg) translateZ(200px) rotate(180deg);
  background-color  : transparent;
  background-image  : url();
  background-repeat :no-repeat;
}

#cube div:nth-child(6)  {
  transform         : rotateX(90deg) translateZ(200px);
  background-color  : transparent;
  background-image: url();
  background-repeat :no-repeat;
  text-align:center;  
}