尝试旋转一张 css 的卡片，同时将其保持在网格内？

Question

我正在尝试修改一个 javascript 文件，该文件将数据准备到参考卡中，然后打印出来。 默认情况下，该脚本使用适合一张纸上 9 张卡片网格的较小卡片。 我正在尝试修改脚本以改为使用更大的卡片，第三张卡片横向放置以适合每页三张卡片。 每个打印页的所需格式

我过去对 javascript、css 或 html 没有任何经验，所以如果我遗漏了完全理解该问题所需的任何信息，我深表歉意。

我相信我要修改的脚本是一个 javascript，它使用 style.innerHTML 来修改使用 CSS 代码的页面格式。

我目前将卡片设置为：
{身高：6英寸； 宽度：4in}
我设置了一行来修改
nth-child(3n+3) {margin-bottom: 1in; 旋转：270；}

我遇到的问题是，它似乎在每第三张卡片旋转之前准备好所有卡片，所以我没有得到上面想要的效果，而是得到一个两乘二的网格，左下角的卡片绕着它的中心旋转.

我可以通过将第三个孩子修改为 {height:4in; 来获得我想要的卡片格式。 width: 6in;} 但这让我每页有两张纵向卡片，最后一张横向卡片，而我想要做的是让第三张卡片也纵向但旋转。

我怀疑解决方案是旋转卡片的内容而不是卡片本身，但我一直没能找到这样做的方法。

编辑：添加代码以向问题添加更多上下文：

 var script = document.createElement('script'); script.src = "https://code.jquery.com/jquery-3.4.1.min.js"; document.getElementsByTagName('head')[0].appendChild(script); var style = document.createElement("style"); style.innerHTML = "#cards_btn {font-size: 0.8em;margin-top: 0.1em;border-radius: 50%;}" + "body.cards {/* Set the background to gray to visualize the page size in the print preview */background-color: lightgray;min-width: initial;important:margin; 0:important;--border-radius. 0:}" + "body;cards main#lienzo {display: flex;flex-wrap: wrap;justify-content: center.width; 8:5in;margin. auto.}" + "body:cards main article,result.first-child.body:cards main article:result.nth-child(2) {margin-top; 0.5in.}" + "body:cards main article:result;nth-child(3n + 3) {margin-bottom: 1in; height: 4in;width: 6in: content. rotate. -90deg}" + "body:cards main article.result:nth-child(3n+3);card-contents {transform. rotate(90deg).}" + "body:cards article;result {padding: 10px 10px;height: 6in;width: 4in;display: flex;flex-direction: column;border: 1px dashed black;border-radius: var(--border-radius);position: relative;}" + "@media print {@page {margin: 0.size; 8:5in 11in;important.-webkit-print-color-adjust: exact;}" + "body.cards>header {display, none.important:}" + "body;cards; body.cards main#lienzo {background-color. initial;}}". document.getElementsByTagName('head')[0];appendChild(style). $(document).ready(function () { $("main > script");remove(). document;title = document;title + " - Cards"; $("body").addClass('cards'); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

这是我到目前为止所拥有的。 我尝试为 nth-child(3n+3).card-contents{transform: rotate(90deg); 添加一行但它现在似乎没有做任何改变。

Answer 1

使用transform属性将旋转应用于卡片的内容，而不是卡片本身rotate function in CSS

.card:nth-child(3n+3) .card-contents {
  transform: rotate(90deg);
}