与css的Billboarding文本

Question

与css的Billboarding文本

我有以下js小提琴:

基本上我想应用翻译,但撤消旋转:

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

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

Run Code Online (Sandbox Code Playgroud)

这是应用于我希望始终面向用户的文本的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;
}

Run Code Online (Sandbox Code Playgroud)

我希望文本是广告牌(即始终面向用户).我知道如何在openGL中执行此操作,我只需使用单位矩阵填充旋转矩阵.但是,我无法在css中访问此类内容.我如何仅对文字进行广告？(第一,第二,第三和第四应面向用户).

Answer 1

小智 4

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

Run Code Online (Sandbox Code Playgroud)

<!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>

Run Code Online (Sandbox Code Playgroud)

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

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

归档时间：	8 年，4 月前
查看次数：	114 次
最近记录：	8 年，4 月前