text rotation

3 files changed, 7 insertions, 0 deletions

diff --git a/site/assets/css/applets.css b/site/assets/css/applets.css
index 1b4bd7d2..1e57578e 100644
--- a/site/assets/css/applets.css
+++ b/site/assets/css/applets.css
@@ -57,6 +57,9 @@
 .results > div:nth-child(3n+1) {
   margin-left: 0;
 }
+.applet h2 {
+  font-size: 20pt;
+}
 .query h2 {
   margin-top: 0; padding-top: 0;
 }
diff --git a/site/assets/css/css.css b/site/assets/css/css.css
index 4689f67b..8b99f740 100644
--- a/site/assets/css/css.css
+++ b/site/assets/css/css.css
@@ -401,6 +401,8 @@ section.fullwidth .image {
   right: -16vw;
   z-index: 0;
   text-align: center;
+  perspective: 500px;
+  perspective-origin: 50% 80%;
 }
 .currentFace {
   position: absolute;
@@ -408,6 +410,7 @@ section.fullwidth .image {
   width: 100%;
   left: 0;
   text-align: center;
+  font-size: 26px;
 }
 .intro {
   max-width: 640px;
diff --git a/site/assets/js/app/face.js b/site/assets/js/app/face.js
index ab3d950f..0d3ce232 100644
--- a/site/assets/js/app/face.js
+++ b/site/assets/js/app/face.js
@@ -245,6 +245,7 @@ var faceInit = function () {
     mouseTarget.y += (mouse.y - mouseTarget.y) * 0.1
     scene.rotation.x = (mouseTarget.y - 0.5) * Math.PI / 2
     scene.rotation.y = (mouseTarget.x - 0.5) * Math.PI
+    currentFace.style.transform = "translateZ(0) rotateY(" + (scene.rotation.y/2) + "rad)"
     // scene.rotation.y += 0.01
     last_t = t
   }