Trying to rotate a css card while keeping it inside a grid?

Question

I'm trying to modify a javascript file that prepares data into reference cards to then print out. By default, the script uses smaller cards that fit as a 9-card grid on a piece of paper. I'm trying to modify the script to instead have much larger cards with the third card being sideways to fit three cards per page. Desired Format per printed page

I don't have any past experience with javascript, css, or html so I apologize if I'm missing any information needed to fully understand the question.

I believe the script I'm trying to modify is a javascript that is using style.innerHTML to modify the formatting of the page using CSS code.

I currently have the cards set to have:
{height: 6in; width: 4in}
and I have a line set to modify the
nth-child(3n+3) {margin-bottom: 1in; rotate: 270;}

The problem I'm having is that it appears to prepare all cards before it rotates every third card so instead of getting the desired effect above, I end up with a two-by-two grid and the bottom left card being rotated around its center.

I can get the formatting of the cards how I want it by modifying the third child to be {height:4in; width: 6in;} but that leaves me with two cards per page in portrait and the last in landscape whereas what I'm trying to do is have the third also in portrait but rotated.

I suspect the solution is to rotate the contents of the card instead of the card itself, but I haven't been able to find a way to do that.

Edit: adding in code to add some more context to the question:

 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>

Here is what I have so far. I tried adding in a line for nth-child(3n+3).card-contents{transform: rotate(90deg);but it doesn't appear to do change anything right now.

Answer 1

apply the rotation to the contents of the card, rather than the card itself using transform property rotate function in CSS

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