Transition und Transform kombiniert

HTML

<script LANGUAGE="JavaScript">
var message="Sorry this function is disabled."
function clickIE4(){
if(event.button==2){
   alert(message)
return false}}
function clickNS4(e){
if(document.layers||document.getElementById&&!document.all){
if(e.which==2||e.which==3){
 alert(message)
return false}}}
function disableselect(e){
return false}
function reEnable(){
return true}
document.onselectstart=new Function("return false")
if(window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable}
if(document.layers){
document.captureEvents(Event.MOUSEDOWN)
document.onmousedown=clickNS4}
else if(document.all&&!document.getElementById){
document.onmousedown=clickIE4}
document.oncontextmenu=new Function("alert(message);return false")
</script>    
<div class="transe"></div>

CSS

body { padding: 60px;}
.transe { 
    position: relative; 
    display: inline-block; 
    border: 1px dashed #000; 
    padding: 60px; 
    background: #a20000; 
    height: 140px; 
    opacity: 0.5; 
       -moz-transition: all 1s ease; 
        -ms-transition: all 1s ease; 
         -o-transition: all 1s ease; 
    -webkit-transition: all 1s ease; 
            transition: all 1s ease;
}
.transe:hover { 
    opacity: 1;
       -moz-transform: scale(1.5) rotate(30deg) translate(50px); 
        -ms-transform: scale(1.5) rotate(30deg) translate(50px); 
         -o-transform: scale(1.5) rotate(30deg) translate(50px); 
    -webkit-transform: scale(1.5) rotate(30deg) translate(50px); 
            transform: scale(1.5) rotate(30deg) translate(50px);
}