使用CSS实现广告牌式文本效果

6

我有以下的js fiddle:

https://jsfiddle.net/0c208z9e/

基本上,我想应用翻译,但是取消这个旋转:
@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中我无法访问此类内容。我该如何使文本成为广告牌?(“First”,“Second”,“Third”和“Forth”应该面向用户)。

这是一个很好的问题。我会在 Twitter 上联系一些人,看看他们有没有什么想法。 - AnilRedshift
很好的问题。我不确定你是否可以使用纯CSS来实现这一点,因为它具有级联性质和无法“打破”父级变换的能力。 - apscience
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 );
    }
}
<!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中的向量来改变旋转方向。请注意,您必须同时更改rotateProtateM

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


为什么将文本移动到单独的div中并应用反向旋转会起作用?这不会撤消计算出的平移吗?我对css如何应用其矩阵运算有些困惑。另一个div仍然首先应用旋转,当您更改dom布局时,操作顺序会如何改变?我来自于更多的openGL/C背景,css对我来说非常令人困惑。 - lee
1
@SpentDeath 这是由于变换原点的缘故。应用于 div.plate 的 3D 位置变换不会改变 DOM 的原点。这意味着将 rotate3d(1, 1, 1, 45deg) 应用于从 (0, 0, 0) 移动到 (0, 0, 128px) 的元素,使用 translate3d(0, 0, 128px),旋转元素围绕 (0, 0, 0) 而不是 (0, 0, 128px) - Isitea

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接