javascript - 使用 CSS 的广告牌文本

我有以下 js fiddle :

本质上我想应用翻译，但从这里撤消旋转:

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

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

这是应用于我希望始终面向用户的文本的 css(球形广告牌)

.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;
}

我希望文本显示在广告牌上(即始终面向用户)。我知道如何在 openGL 中执行此操作，我只是用单位矩阵填充旋转矩阵。但是，我无法在 css 中访问此类内容。我如何只发布文字广告牌？ (第一、第二、第三和第四应面向用户)。

最佳答案

这是完整的六面示例，信箱始终面向用户。仅使用 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>

您可以通过更改 rotate3d 中的矢量来更改旋转方向。请注意，您必须更改 rotateP 和 rotateM

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

关于javascript - 使用 CSS 的广告牌文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49972853/

javascript - 使用 CSS 的广告牌文本

上一篇：javascript - AngularJS 和大 JSON 数据

下一篇：javascript - 在输入焦点上更改标签的字体大小