嘗試旋轉一張 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);
}