Menu
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).
393
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/
106
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
