rotate_.aspx font size:
View Sample
<html>
<head>
<title>Abakada CSS Demo: rotate Property</title>
<link rel="stylesheet" href="/shared/netdemos.css">

<style>
#theImage {
   margin: 10; padding: 10;
   transition: rotate 1.2s;
   rotate: 0;
}
table.demo {
   width: 65%; height: 360; 
   box-shadow: -8px 8px 8px gray;
}
select {
   width: 200px; padding: 3px; font-size: 12pt;
   background-color: wheat;
}
</style>

<script language="JavaScript">
<!--
function change ( ) {
   theImg = document.getElementById ( "theImage" );
   theImg.style.rotate = lstOptions.value;
   setTimeout( ( ) => {
      theImg.style.rotate = "0deg";
   }, 2000 );
}
//-->
</script>
</head>

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

<center>

<p id="msg">This example illustrates the effects of applying different values to the individual <b>rotate</b> property. </p>

<table class="demo">
<tr align="center">
<td width="50%" style="background: linear-gradient(skyblue, palegoldenrod, skyblue)">
   <img id="theImage" src="/abkd/shared/images/samp14.jpg"></td>
</td>
<td width="50%" style="background: linear-gradient(#e66465, #9198e5);">
   <select id="lstOptions" size=10 onchange="change ( )">
      <option selected>Choose a value</option>
      <option>90deg</option>
      <option>-90deg</option>
      <option>x 180deg</option>
      <option>x -180deg</option>
      <option>y 180deg</option>
      <option>y -180deg</option>
      <option>1 1 1 360deg</option>
      <option>2 1 1 360deg</option>
      <option>1 2 1 360deg</option>
      <option>1 1 2 360deg</option>
      <option>1 1 1 -360deg</option>
   </select>
</td>
</tr>
</table>

<div class="note">NOTE: This property is independent of the <b>transfrom: rotate( )</b> function.</div>

</center>

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

</body>
</html>