保持CSS网格中旋转方形div的宽度和高度(响应式解决方案) [英] Maintain width and height of rotated square divs in CSS grid (responsive solution)

查看：21
本文介绍了保持CSS网格中旋转方形div的宽度和高度(响应式解决方案)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试使用跨设备的 CSS 网格来保持方形 div 的高度和宽度一致.我已经旋转了网格以尝试制作 '菱形' 形状，但是当屏幕调整大小时，该形状会发生变化.如何在容器占据整个视口高度和宽度的网格中保持一致的完美旋转方形宽度和高度?

.grid {显示:网格；网格模板列:重复(3，1fr)；网格列间距:1em；网格行距:1em；变换:旋转(45度)；溢出:隐藏；}.grid>div {边框:实心 1px 红色；}.容器 {宽度:100%；}.网格 {宽度:100%；高度:100vh；}

<div class="grid"><div>盒子
<div>盒子

<div>盒子

<div>盒子

<div>盒子

<div>盒子

<div>盒子

<div>盒子

<div>盒子

解决方案

由于你是旋转元素45deg，宽/高需要遵循这个公式:height = width = 50vh/cos(45deg) = 50vh/0.707.您还需要调整 transform-origin 并添加一个小的翻译来纠正位置:

.grid {显示:网格；网格模板列:重复(3，1fr)；网格列间距:1em；网格行距:1em；变换:translateY(-29%)旋转(45度)；变换原点:左下角；溢出:隐藏；宽度:计算(50vh/0.707)；高度:计算(50vh/0.707)；}.grid>div {边框:实心 1px 红色；}身体 {边距:0；溢出:隐藏；}

<div>盒子
<div>盒子

<div>盒子

<div>盒子

<div>盒子

<div>盒子

<div>盒子

<div>盒子

<div>盒子

translateY(-29%)是在旋转前将左下角原点移动到左边缘的中心:

蓝色距离等于50vh - (100vh - Width) = 50vh - 100vh + 50vh/0.707 = 50vh*(1 + 1.414) - 50vh*2 = 0.414*50vh

如果我们将此结果除以宽度 (0.414/1.414)，我们将得到 29%.

I am trying to maintain a consistent height and width of my square divs using CSS grid across devices. I've rotated the grid in an attempt to make a 'diamond' shape, but this shape changes when the screen resizes. How do I keep a consistent perfect rotated square width and height in my grid where the container takes up the entire viewport height and width?

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  transform: rotate(45deg);
  overflow: hidden;
}

.grid>div {
  border: solid 1px red;
}

.container {
  width: 100%;
}

.grid {
  width: 100%;
  height: 100vh;
}

<div class="container">
  <div class="grid">
    <div>
      box
    </div>
    <div>
      box
    </div>
    <div>
      box
    </div>
    <div>
      box
    </div>
    <div>
      box
    </div>
    <div>
      box
    </div>
    <div>
      box
    </div>
    <div>
      box
    </div>
    <div>
      box
    </div>
  </div>
</div>

解决方案

Since you are rotating the element 45deg, the width/height need to follow this formula: height = width = 50vh / cos(45deg) = 50vh / 0.707. You need to also adjust the transform-origin and add a small translation to correct the position:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  transform: translateY(-29%) rotate(45deg);
  transform-origin:bottom left;
  overflow: hidden;
  width:calc(50vh/0.707);
  height:calc(50vh/0.707);
}

.grid>div {
  border: solid 1px red;
}

body {
  margin: 0;
    overflow: hidden;
}

<div class="grid">
    <div>
      box
    </div>
    <div>
      box
    </div>
    <div>
      box
    </div>
    <div>
      box
    </div>
    <div>
      box
    </div>
    <div>
      box
    </div>
    <div>
      box
    </div>
    <div>
      box
    </div>
    <div>
      box
    </div>
  </div>

The translateY(-29%) is to move the bottom left origin to the center of the left edge before the rotation:

The blue distance is equal to 50vh - (100vh - Width) = 50vh - 100vh + 50vh/0.707 = 50vh*(1 + 1.414) - 50vh*2 = 0.414*50vh

and if we divide this result with the width (0.414/1.414) we have our 29%.

这篇关于保持CSS网格中旋转方形div的宽度和高度(响应式解决方案)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆