3D Rotating Sphere Tag Cloud In Pure CSS

Category: CSS & CSS3 | May 27, 2024
Author:NiklasKnaack
Views Total:56 views
Official Page:Go to website
Last Update:May 27, 2024
License:MIT

Preview:

3D Rotating Sphere Tag Cloud In Pure CSS

Description:

This is a creative, interactive tag cloud that evenly distributes all the specified tags/links onto the surface of a rotating 3D sphere.

Is it built with HTML and CSS/CSS3. No JavaScript required. Hovering your mouse over the sphere pauses the rotation, and clicking on a tag will follow its specified link.

How to use it:

1. Add your tags/links to the tags cloud. Each tag is an <li> element within the tagcloud-tags list. You can easily add or remove tags, and include links by nesting an <a> tag within the <div> of each tag.

<div class="tagcloud-wrapper">
  <div class="tagcloud-controls" style="--num-elements: 20">
    <div class="tagcloud-control-button" style="--index: 1"><input type="radio" name="tagcloud-control-input"></div>
    <div class="tagcloud-control-button" style="--index: 2"><input type="radio" name="tagcloud-control-input"></div>
    <div class="tagcloud-control-button" style="--index: 3"><input type="radio" name="tagcloud-control-input"></div>
    ... more control buttons here ...
    <div class="tagcloud-rotation">
      <ul class="tagcloud-tags" style="--num-elements: 93">
        <li class="tagcloud-tag" style="--index: 1"><div><a href="https://www.cssscript.com/" target="_blank">CSSScript</a></div></li>
        <li class="tagcloud-tag" style="--index: 2"><div><a href="https://www.jqueryscript.net" target="_blank">jQueryScript</a></div></li>
        <li class="tagcloud-tag" style="--index: 3"><div><a href="https://www.reactscript.com" target="_blank">ReactScript</a></div></li>
        ... more tags here ...
      </ul>
    </div>
  </div>
</div>

2. Apply the necessary CSS/CSS3 rules to achieve the 3D effect and control the tag cloud’s appearance.

/*
vars
*/
:root {
  --tagcloud-transition-user-duration: 1250ms;
  --tagcloud-transition-user-ease: ease-in-out;
  --tagcloud-transition-duration: 250ms;
  --tagcloud-transition-ease: ease-out;
  --tagcloud-bg-color-rgb: 0, 0, 0;
  --tagcloud-animation-duration: 25s;
  --tagcloud-animation-direction: normal;
  --tagcloud-animation-play-state: running;
  --tagcloud-diameter: 32rem;
  --tagcloud-start-rotation: 54;
  --tagcloud-controls-diameter: 256rem;
  --tagcloud-control-bg-color: transparent;
  --tagcloud-control-bg-hover-color: transparent;
  --tagcloud-control-bg-checked-color: transparent;
  --tag-diameter: 5.5rem;
  --tag-font-color-rgb: 255, 255, 255;
  --tag-font-family: 'Open Sans', sans-serif;
  --tag-font-size: 1rem;
}
/*
global
*/
*, *::before, *::after {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}
*:focus {
  outline: none;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: rgb(var(--tagcloud-bg-color-rgb));
  overflow: hidden;
}
/*
tagcloud
*/
.tagcloud-wrapper {
  --_control-diamater: var(--tagcloud-controls-diameter);
  --_control-radius: calc(var(--_control-diamater) / 2);
  --_diameter: var(--tagcloud-diameter);
  --_radius: calc(calc(var(--_diameter) / 2) - calc(var(--tag-diameter) / 2));
  width: var(--control-diameter);
  aspect-ratio: 1 / 1;
  font-family: var(--tag-font-family);
  font-size: var(--tag-font-size);
}
@media only screen and (max-width: 48rem) {
  .tagcloud-wrapper {
      --_control-diamater: calc(var(--tagcloud-controls-diameter) * 0.5);
      --_diameter: calc(var(--tagcloud-diameter) * 0.88);
  }
}
@media only screen and (max-width: 32rem) {
  .tagcloud-wrapper {
      --_diameter: calc(var(--tagcloud-diameter) * 0.75);
  }
}
.tagcloud-wrapper:has(.tagcloud-rotation:hover)  {
  --tagcloud-animation-play-state: paused;
}
.tagcloud-wrapper .tagcloud-tags {
  position: absolute;
  width: var(--_diameter);
  aspect-ratio: 1 / 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  list-style-type: none;
  position: relative;
  transform-style: inherit;
  animation: tagcloud-rotation var(--tagcloud-animation-duration) var(--tagcloud-animation-direction) linear infinite var(--tagcloud-animation-play-state);
}
@keyframes tagcloud-rotation {
  from {transform: translate(-50%, -50%) rotateX(0deg);}
  to {transform: translate(-50%, -50%) rotateX(360deg);}
}
.tagcloud-wrapper .tagcloud-tags:has(.tagcloud-tag div a:hover) .tagcloud-tag:not(:has(div a:hover)) {
  opacity: 0.25;
}
.tagcloud-wrapper .tagcloud-tag {
  --_phi: acos(calc(-1 + (2 * var(--index)) / var(--num-elements)));
  --_theta: calc(sqrt(calc(var(--num-elements) * 3.141592653589793)) * var(--_phi));
  --_x: calc(cos(var(--_theta)) * sin(var(--_phi)));
  --_y: calc(sin(var(--_theta)) * sin(var(--_phi)));
  --_z: calc(cos(var(--_phi)));
  --_vector-length: sqrt(var(--_x) * var(--_x) + var(--_y) * var(--_y) + var(--_z) * var(--_z));
  --_normalized-x: calc(var(--_x) / var(--_vector-length));
  --_normalized-y: calc(var(--_y) / var(--_vector-length));
  --_normalized-z: calc(var(--_z) / var(--_vector-length));
  --_scaled-x: calc(var(--_normalized-x) * var(--_radius));
  --_scaled-y: calc(var(--_normalized-y) * var(--_radius));
  --_scaled-z: calc(var(--_normalized-z) * var(--_radius));
  --_final-x: calc(var(--_scaled-x) + var(--_radius));
  --_final-y: calc(var(--_scaled-y) + var(--_radius));
  --_final-z: var(--_scaled-z);
  pointer-events: none;
  width: var(--tag-diameter);
  height: var(--tag-diameter); 
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  transition: opacity var(--tagcloud-transition-duration) var(--tagcloud-transition-ease);
  transform: translate3d(var(--_final-x), var(--_final-y), var(--_final-z));
  animation: tagcloud-tag-rotation var(--tagcloud-animation-duration) var(--tagcloud-animation-direction) linear infinite var(--tagcloud-animation-play-state);
}
@keyframes tagcloud-tag-rotation {
  from {transform: translate3d(var(--_final-x), var(--_final-y), var(--_final-z)) rotateX(360deg);}
  to {transform: translate3d(var(--_final-x), var(--_final-y), var(--_final-z)) rotateX(0deg);}
}
.tagcloud-wrapper .tagcloud-tag div {
  transform: rotateZ(calc(var(--_current-rotation) * -1deg));
  transition: transform var(--tagcloud-transition-user-duration) var(--tagcloud-transition-user-ease);
}
.tagcloud-wrapper .tagcloud-tag div a {
  pointer-events: initial;
  color: rgb(var(--tag-font-color-rgb));
  text-decoration: none;
  text-shadow: 1px  1px 1px rgb(var(--tagcloud-bg-color-rgb)),
                  1px -1px 1px rgb(var(--tagcloud-bg-color-rgb)),
                  -1px  1px 1px rgb(var(--tagcloud-bg-color-rgb)),
                  -1px -1px 1px rgb(var(--tagcloud-bg-color-rgb)), 
                  0 0 1rem rgb(var(--tagcloud-bg-color-rgb));
}
.tagcloud-wrapper .tagcloud-controls {
  width: var(--_control-diamater);
  aspect-ratio: 1 / 1;
  position: relative;
  --_current-rotation: var(--tagcloud-start-rotation);
  transform-style: inherit;
}
.tagcloud-wrapper .tagcloud-controls .tagcloud-control-button {
  --_width: var(--_control-radius);
  --_height: calc(var(--_control-diamater) * 3.141592653589793 / var(--num-elements) + 1px);
  --_theta-start: 0;
  --_theta-length: calc(2 * 3.141592653589793);
  --_segment: calc(var(--_theta-start) + var(--index) / var(--num-elements) * var(--_theta-length));
  --_x: calc(var(--_control-radius) * cos(var(--_segment)));
  --_y: calc(var(--_control-radius) * sin(var(--_segment)) + var(--_control-radius) - var(--_height) / 2);
  --_rotation: calc(var(--index) / var(--num-elements) * 360deg);
  position: absolute;
  left: var(--_x);
  top: var(--_y);
  width: var(--_width);
  height: var(--_height);
  clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
  transform-origin: right center;
  transform: rotate(var(--_rotation));
  transition: background-color var(--tagcloud-transition-duration) var(--tagcloud-transition-ease);
  background-color: var(--tagcloud-control-bg-color);
}
.tagcloud-wrapper .tagcloud-controls .tagcloud-control-button input {
  -webkit-appearance: none;
  appearance: none;
  opacity: 0;
  width: 100%;
  height: 100%;
}
.tagcloud-wrapper .tagcloud-controls .tagcloud-control-button:has(input:checked) {
  background-color: var(--tagcloud-control-bg-checked-color);
}
.tagcloud-wrapper .tagcloud-controls .tagcloud-control-button:has(input:hover) {
  background-color: var(--tagcloud-control-bg-hover-color);
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(1) input:checked) {
  --_current-rotation: 108;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(2) input:checked) {
  --_current-rotation: 126;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(3) input:checked) {
  --_current-rotation: 144;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(4) input:checked) {
  --_current-rotation: 162;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(5) input:checked) {
  --_current-rotation: 180;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(6) input:checked) {
  --_current-rotation: 198;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(7) input:checked) {
  --_current-rotation: 216;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(8) input:checked) {
  --_current-rotation: 234;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(9) input:checked) {
  --_current-rotation: 252;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(10) input:checked) {
  --_current-rotation: 270;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(11) input:checked) {
  --_current-rotation: 288;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(12) input:checked) {
  --_current-rotation: 306;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(13) input:checked) {
  --_current-rotation: 324;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(14) input:checked) {
  --_current-rotation: 342;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(15) input:checked) {
  --_current-rotation: 0;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(16) input:checked) {
  --_current-rotation: 18;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(17) input:checked) {
  --_current-rotation: 36;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(18) input:checked) {
  --_current-rotation: 54;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(19) input:checked) {
  --_current-rotation: 72;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(20) input:checked) {
  --_current-rotation: 90;
}
.tagcloud-wrapper .tagcloud-controls .tagcloud-control-button:has(input:checked) ~ .tagcloud-rotation {
  transform: translate(-50%, -50%) rotate(calc(var(--_current-rotation) * 1deg));
}
.tagcloud-wrapper .tagcloud-controls .tagcloud-control-button:has(input:checked) ~ .tagcloud-rotation .tagcloud-tags .tagcloud-tag div {
  transform: rotateZ(calc(var(--_current-rotation) * -1deg));
}
.tagcloud-wrapper .tagcloud-controls .tagcloud-rotation {
  position: absolute;
  width: var(--_diameter);
  aspect-ratio: 1 / 1;
  perspective: calc(var(--_diameter) * 2);
  transform-style: preserve-3d;
  left: 50%;
  top: 50%;
  background: radial-gradient(rgba(var(--tagcloud-bg-color-rgb), 0.75) 15% , rgba(var(--tagcloud-bg-color-rgb), 0) calc(75% - var(--tag-diameter)));
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(calc(var(--_current-rotation) * 1deg));
  transition: transform var(--tagcloud-transition-user-duration) var(--tagcloud-transition-user-ease);
}

3. Override default variables in the :root to customize the look and feel of the sphere to match your website’s design.

:root {
  --tagcloud-transition-user-duration: 1250ms;
  --tagcloud-transition-user-ease: ease-in-out;
  --tagcloud-transition-duration: 250ms;
  --tagcloud-transition-ease: ease-out;
  --tagcloud-bg-color-rgb: 0, 0, 0;
  --tagcloud-animation-duration: 25s;
  --tagcloud-animation-direction: normal;
  --tagcloud-animation-play-state: running;
  --tagcloud-diameter: 32rem;
  --tagcloud-start-rotation: 54;
  --tagcloud-controls-diameter: 256rem;
  --tagcloud-control-bg-color: transparent;
  --tagcloud-control-bg-hover-color: transparent;
  --tagcloud-control-bg-checked-color: transparent;
  --tag-diameter: 5.5rem;
  --tag-font-color-rgb: 255, 255, 255;
  --tag-font-family: 'Open Sans', sans-serif;
  --tag-font-size: 1rem;
}

You Might Be Interested In:


Leave a Reply