使用 CSS 旋转元素后使用高度/宽度 100%

我有一个想要旋转的元素（视频），然后使用 100% 宽度和高度。在应用旋转之前，视频占据 100% 的宽度和高度。旋转后，尺寸似乎与旋转之前保持相同。我想重新应用宽度和高度 100% 以使视频适应新状态。

目标是尝试以横向方式呈现视频，即使 div（或手机）处于纵向模式。

这是我正在尝试做的 JSFiddle：http://jsfiddle.net/a1sLp5gn/2/ http://jsfiddle.net/a1sLp5gn/2/

在小提琴中，单击按钮以查看所需状态的视频。

该视频包含在一个容器 div 中，该容器演示了它是由手机屏幕之类的东西构成的（红色边框，我想用视频填充这个 div）。

使用单击按钮后运行的 JS，我能够实现我的目标，但我是以一种黑客丑陋的方式来做的 - 我想知道什么是实现我正在做的事情的适当/最好的方法。

这是 CSS（最好查看我提供的小提琴链接，我只是将其放在这里，因为当存在小提琴链接时 stackoverflow 需要一些代码）：

video {
      transform:rotate(90deg);
      height:100%;
      width:100%;
}

.container {
      border-style:solid;
      border-width:1px;
      border-color: red;
      height:640px;
      width:360px;
}

我希望这可以帮助你： 即使您旋转元素，高度、宽度、左侧和顶部属性也会在未旋转的元素上计算。您必须考虑容器尺寸并手动反转值。 通常旋转以元素的中心点为参考。 （您可以使用 transorm-origin 进行更改，但在这种情况下，如果视频元素已经居中，则不需要）

$(function() {
 $('button').click(function() {

   var container = $("video").parent()

   $('video').height($(container).width());
   $('video').width($(container).height());

   $('video').css('position', 'absolute')
   var px = $(container).width() / 2
   var py = $(container).height() / 2
   $('video').css('left', px-py).css('top', py-px);
   //$("video").css({"transform":"rotate(90deg)"})
 });
});