미리보기에서는 잘 나오는데 저장하면 전부 망가지고 그후로는 미리보기도 엉망이 되네요


<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>clock</title>
  <style>
#clock { position:relative;width:300px;height:300px; }
#clock img { position:absolute;top:0;left:0; }
#digital { width:300px; height:20px; text-align:center; }
}
  </style>
 </head>
 <body>
<div id="clock">
<img src="https://i.imgur.com/RarwHBl.png">
<img id="hour" src="https://i.imgur.com/LI384RS.png">
<img id="munite" src="https://i.imgur.com/WBzxVSd.png">
<img id="second" src="https://i.imgur.com/S0TGM6D.png">
</div>
<div id="digital"></div>
<script>
function digital() 
{
var d = new Date(); 
var h = d.getHours(); 
var m = d.getMinutes(); 
var s = d.getSeconds(); 
if( h > 12 ) h = h - 12; 
var dh = ( h * 30 ) + ( m / 2 ); 
dh = parseInt( dh ); 
var dm = m * 6; 
var ds = s * 6; 
 
document.getElementById("hour").style.transform = "rotate(" + dh + "deg)";
document.getElementById("munite").style.transform = "rotate(" + dm + "deg)";
document.getElementById("second").style.transform = "rotate(" + ds + "deg)";
document.getElementById("hour").style.MsTransform = "rotate(" + dh + "deg)";
document.getElementById("munite").style.MsTransform = "rotate(" + dm + "deg)";
document.getElementById("second").style.MsTransform = "rotate(" + ds + "deg)";
document.getElementById("hour").style.WebkitTransform = "rotate(" + dh + "deg)";
document.getElementById("munite").style.WebkitTransform = "rotate(" + dm + "deg)";
document.getElementById("second").style.WebkitTransform = "rotate(" + ds + "deg)";
 
document.getElementById("digital").innerHTML = h + ":" + m + ":" + s;
}
 
var timer = setInterval( function(){ digital(); }, 1000);
</script>
 </body>
</html>