CODEWITHSUNDEEP
javascripthtmlcsscss-animationscss-transitions
Ayan
Ayan

Reputation: 55

How to create a sphere with strings that rotates toward the mouse pointer in css and js?

The output I want;

enter image description here

I want to make a sphere with names, but without curving/bending the names. I also want to make it spin in the direction of the mouse pointer.

If i use this rotate property, my words got curved.

@keyframes rotate {
 0% {
  transform: rotateY(0deg);
 }
 100% {
  transform: rotateY(360deg);
 }
}
.circ{
  border: none;
  height: 200px;
  width: 200px;
  position: absolute;
  border-radius: 50%;
  transform-style: preserve-3d;
  box-sizing: border-box;
}
#sphere{
 animation: rotate 6s linear infinite;
 transform-style: preserve-3d;
 width: 400px;
 height: 400px;
}
.circ:nth-child(1) {
 transform: rotateX(0deg);
}
.circ:nth-child(2) {
 transform: rotateX(30deg);
}
.circ:nth-child(3) {
 transform: rotateX(60deg);
}
.circ:nth-child(4) {
 transform: rotateX(90deg);
}
.circ:nth-child(5) {
 transform: rotateX(120deg);
}
.circ:nth-child(6) {
 transform: rotateX(150deg);
}
.circ:nth-child(7) {
 transform: rotateX(180deg);
}
.circ:nth-child(8) {
 transform: rotateX(210deg);
}
<div id="sphere">
  <div class="circ">aaaaa</div>
  <div class="circ">bbbbb</div>
  <div class="circ">ccccc</div>
  <div class="circ">ddddd</div>
  <div class="circ">eeeee</div>
  <div class="circ">ffffffff</div>
</div>

and so on..

Upvotes: 2

Views: 2420

Answers (2)

Sabitha
Sabitha

Reputation: 1

I know this is a very old post, just in case if someone is looking for an answer to this, it's not complicated anymore. There is a TagCloud npm package that you could use to achieve text sphere. Please use the below link to learn further.

https://www.npmjs.com/package/TagCloud

Upvotes: 0

frodo2975
frodo2975

Reputation: 11775

TLDR: It's complicated.

Basically you want a game engine loop and some advanced visualization library like D3 or Pixi.js. You might could get away with straight css/html if you only have a few words, but it might be laggy Here's the approach I would take:

  1. Give each word a coordinate in relation to the center of a 3d sphere.
  2. Do some math and rotate your sphere towards the mouse. (You probably want to use a vector library like gl-matrix.)
  3. Update each word's position by applying the sphere's rotation to it.
  4. Apply camera lens transform to each word's location, or just scale them by z-distance to get a perspective effect.
  5. Render words using whatever tech your library uses, like sprites or vectors.

Upvotes: 1

Related Questions