为什么画布元素旋转后的行为不像块元素？

Question

我正在为手机开发乒乓球游戏。我正在写Javascript，HTML和CSS。在台式机版本中，我的应用程序可以正常工作，而我用于显示乒乓球的画布是水平的，但在移动版本中，由于使用方便，它必须是垂直的。我的问题是，当我使用CSS变换旋转画布时：rotate（-90deg）它的行为不像block元素，而是覆盖了其他元素。

Before rotate

After rotate

这是我旋转画布元素的代码。

var rates = {
    'EUR': 
        {'USD': 1.13, 'GBP':0.86,'YEN':127.274,'CAD':1.51}, 
    'USD': 
        {'CAD':1.33,'EUR': 0.87,'GBP':0.76,'YEN':111.96},
    'GBP':
        {'CAD':1.76,'EUR':1.16 ,'USD':1.32,'YEN':147.86}, 

    'YEN':
        {'CAD':0.0119,'EUR':0.0079 ,'USD':0.0089,'GBP':0.0068},
    'CAD':
        {'YEN':84.23,'EUR':0.66 ,'USD':0.75,'GBP':0.57}}
function conCurrency(){
    var from= document.getElementById("from").Value;
    var to= document.getElementById("to").Value;
    var fAmount =document.getElementById("fromAmount").value
    var result =0;
    if(rates[from.value] && rates[from.value][to.value]){
        result.value = fAmount * rates[from.value][to.value];
   document.getElementById("toAmount") = result;

    }
}