transformswiz.aspx font size:
View Sample
<html>
<head>
<title>Abakada CSS Demo: Transform Functions Wizard</title>
<link rel="stylesheet" href="/shared/netdemos.css">

<style>
table.demo {
   width: 65%; height: 360; 
   box-shadow: -8px 8px 8px gray;
}
#cube {
   width: 100px; height: 100px;
   transform-style: preserve-3d;
   transition: transform 1.2s;
   transform: rotate3d( 1, 1, 1, 30deg);
}
.face {
   display: flex; align-items: center; justify-content: center;
   width: 100%; height: 100%;
   position: absolute; backface-visibility: inherit;
   font-size: 60px; color: #fff;
}
.front {
   background: rgb(90 90 90 / 70%);
   transform: translateZ(50px);
}
.back {
   background: rgb(0 210 0 / 70%);
   transform: rotateY(180deg) translateZ(50px);
}
.right {
   background: rgb(210 0 0 / 70%);
   transform: rotateY(90deg) translateZ(50px);
}
.left {
   background: rgb(0 0 210 / 70%);
   transform: rotateY(-90deg) translateZ(50px);
}
.top {
   background: rgb(210 210 0 / 70%);
   transform: rotateX(90deg) translateZ(50px);
}
.bottom {
   background: rgb(210 0 210 / 70%);
   transform: rotateX(-90deg) translateZ(50px);
}
select {
   font-size: 12pt; padding: 3px;
   background-color: wheat;
}
</style>

<script language="JavaScript".>
<!--
function change ( ) {
   cube.style.transform = `rotate3d(1, 1, 1, 30deg) ${lstOpts.value}`;
   setTimeout( ( ) => {
      cube.style.transform = "rotate3d(1, 1, 1, 30deg)";
   }, 2000 );
}
//-->
</script>
</head>

<body>
<div class="header"><h2>Abakada CSS Demo: <b>Transform Functions</b> Wizard</h2></div>
<hr size=1 width=92%>

<center>

<p id="msg">This example illustrates the effects of applying different values to the available CSS <b>transform functions</b>.</p>

<main>

<table class="demo">
<tr align="center">
<td width="40%" style="background: linear-gradient(skyblue, palegoldenrod, skyblue)">
   <section id="cube">
      <div class="face front">1</div>
      <div class="face back">2</div>
      <div class="face right">3</div>
      <div class="face left">4</div>
      <div class="face top">5</div>
      <div class="face bottom">6</div>
   </section>
</td>
<td width="60%" style="background: linear-gradient(#e66465, #9198e5);">
   <select id="lstOpts" size=13 onchange="change ( )">
      <option selected>Choose a function</option>
      <option>rotate(360deg)</option>
      <option>rotate(-360deg)</option>
      <option>rotateX(360deg)</option>
      <option>rotateX(-270deg)</option>
      <option>rotateY(360deg)</option>
      <option>rotateY(-180deg)</option>
      <option>rotateZ(3.14rad)</option>
      <option>rotateZ(-3.14rad)</option>
      <option>rotate3d(1, 1, 1, 180deg)</option>
      <option>rotate3d(-1, -1, -1, 180deg)</option>
      <option>rotate3d(2, 2, 2, 4.71rad)</option>
      <option>rotate3d(-2, -2, -2, 4.71rad)</option>
      <option>rotate3d(3, 2, 1, 1.5turn)</option>
      <option>rotate3d(1, 2, 3, 1.5turn)</option>
      <option>scale(2.5)</option>
      <option>scale(-2.5)</option>
      <option>scaleX(2.5)</option>
      <option>scaleX(-2.5)</option>
      <option>scaleY(2.5)</option>
      <option>scaleY(-2.5)</option>
      <option>scaleZ(2.5)</option>
      <option>scaleZ(-2.5)</option>
      <option>scale3d(2, 1.5, 2.5)</option>
      <option>scale3d(2, 1.5, 2.5) rotate(180deg)</option>
      <option>scale3d(2.5, 1.5, 2)</option>
      <option>scale3d(2.5, 1.5, 2) rotate(270deg)</option>
      <option>scale3d(2, 2.5, 1.5)</option>
      <option>scale3d(2, 2.5, 1.5) rotate3d(3, 2, 1, 1.5turn)</option>
      <option>skew(60deg, 60deg)</option>
      <option>skew(-60deg, -60deg)</option>
      <option>skew(45deg, 60deg)</option>
      <option>skew(-60deg, -45deg)</option>
      <option>skewX(1rad)</option>
      <option>skewX(-1rad)</option>
      <option>skewY(60deg)</option>
      <option>skewY(-60deg)</option>
      <option>translate(240px, 120px)</option>
      <option>translate(-240px, -120px)</option>
      <option>translateX(120px)</option>
      <option>translateX(-120px)</option>
      <option>translateY(120px)</option>
      <option>translateY(-120px)</option>
      <option>translateZ(120px)</option>
      <option>translateZ(-120px)</option>
      <option>translate3d(120px, 120px, 60px)</option>
      <option>translate3d(120px, 120px, -60px)</option>
      <option>translate(-120px, 180px) rotate(360deg)</option>
      <option>translate(120px, -180px) rotate(360deg)</option>
      <option>perspective(120px)</option>
      <option>perspective(60px)</option>
      <option>matrix(1, 2, -1, 1, 80, 80)</option>
      <option>matrix3d(1,0,0,0,0,1,3,0,0,0,1,0,50,100,0,1.1)</option>
   </select>
</td>
</tr>
</table>

<p class="small"><b>Please wait for the cube to revert to its inital state before applying another choice.</b></p>

</main>
</center>

<hr size=1 width=92%>
<!-- #include virtual="~/shared/viewsrc.inc" -->

</body>
</html>