Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Billboarding text with css

I have the following js fiddle:

https://jsfiddle.net/0c208z9e/

Essentially I want to apply the translation, but undo the rotation from this:

@keyframes rotate {
  0% {
    transform: rotateX(0) rotateY(0) rotateZ(0);
  }

  100% {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}

This is the css that gets applied to the text that I want facing the user at all times (spherically billboarded)

.inset {
  margin-top: 40%;
  margin-left: 40%;
  transform: translateZ(120px);
  color: grey;
}
.inset:hover {
  color: white;
}
.outset {
  margin-top: -15%;
  margin-left: 20%;
  transform: translateZ(-120px);
  color: grey;
}
.outset:hover {
  color: white;
}

I want the text to be billboarded (ie. always facing the user). I know how to do this in openGL, I simply fill the rotation matrix with the identity matrix. However, I don't have access to such things in css. How do I billboard only the text? (First, Second, Third and Forth should be facing the user).

like image 393
War Donkey Avatar asked Apr 23 '18 03:04

War Donkey


1 Answers

Here is full six faces example with letterboxes which always facing to the user. Using only CSS.

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    transform-style: preserve-3d;
}

body {
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    background: rgba( 0, 0, 0, 0.75 );
}

.origin {
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    animation: rotateP 20s infinite linear;
}

.circle {
    width: 128px;
    height: 128px;
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 100%;
    box-shadow: 0 0 60px 2px limegreen;
}

.circleX {
    transform: translate3d( -50%, -50%, 0 ) rotate3d( 1, 0, 0, 90deg );
}

.circleY {
    transform: translate3d( -50%, -50%, 0 ) rotate3d( 0, 1, 0, 90deg );
}

.circleZ {
    transform: translate3d( -50%, -50%, 0 ) rotate3d( 0, 0, 1, 90deg );
}

.plate {
    width: 32px;
    height: 32px;
    position: absolute;
    left: 50%;
    top: 50%;
}

.plate.front {
      transform: translate3d( -50%, -50%, 128px );
}

.plate.right {
      transform: translate3d( calc( -50% + 128px ), -50%, 0 );
}

.plate.left {
      transform: translate3d( calc( -50% - 128px ), -50%, 0 );
}

.plate.back {
      transform: translate3d( -50%, -50%, -128px );
}

.plate.top {
      transform: translate3d( -50%, calc( -50% - 128px ), 0 );
}

.plate.bottom {
      transform: translate3d( -50%, calc( -50% + 128px ), 0 );
}

.letterBox {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d( -50%, -50%, 0 );
    background: whitesmoke;
    animation: rotateM 20s infinite linear;
}

@keyframes rotateP {
    0% {
      transform: rotate3d( 1, 1, 1, 0deg );
    }

    100% {
      transform: rotate3d( 1, 1, 1, 360deg );
    }
}

@keyframes rotateM {
    0% {
      transform: rotate3d( -1, -1, -1, 0deg );
    }

    100% {
      transform: rotate3d( -1, -1, -1, 360deg );
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="rotate.css">
</head>
<body>
    <div style="width: 0; height: 0; border: solid green 1px; position: absolute; left: 50%; top: 50%; transform: translate( -50%, -50% );"></div>
    <div class="origin">
        <div class="circle circleX"></div>
        <div class="circle circleY"></div>
        <div class="circle circleZ"></div>
        <div class="plate front">
            <div class="letterBox">Front</div>
        </div>
        <div class="plate right">
            <div class="letterBox">Right</div>
        </div>
        <div class="plate left">
            <div class="letterBox">Left</div>
        </div>
        <div class="plate back">
            <div class="letterBox">Back</div>
        </div>
        <div class="plate top">
            <div class="letterBox">Top</div>
        </div>
        <div class="plate bottom">
            <div class="letterBox">Bottom</div>
        </div>
    </div>
</body>
</html>

You can change rotation direction with change a vector in rotate3d. Be aware of that you must change both rotateP and rotateM

JSFiddle: https://jsfiddle.net/isitea/svwxmu1p/

like image 106
Isitea Avatar answered Oct 23 '22 12:10

Isitea