如何在横向模式下使垂直工具栏在纵向模式下旋转为水平？

<div class="vertical-toolbar">
  <!-- 工具栏的内容 -->
</div>

.vertical-toolbar {
  width: 100px;
  height: 300px;
  background-color: #ccc;
  /* 其他样式属性 */
}

window.addEventListener('resize', function() {
  var toolbar = document.querySelector('.vertical-toolbar');
  var windowWidth = window.innerWidth;
  var threshold = 768; // 设定的阈值，可以根据实际情况调整

  if (windowWidth < threshold) {
    toolbar.style.transform = 'rotate(90deg)';
    // 其他布局和排列的调整
  } else {
    toolbar.style.transform = 'none';
    // 恢复原始布局和排列
  }
});