I am trying to create a rotated shape layout using CSS. However, when I rotate the parent <div> with transform: rotate(45deg), the text and icons inside the div also rotate.
To counteract this, I attempted to apply an inverse rotation to the child elements using transform: rotate(-45deg)
However, instead of achieving the desired outcome of having the text and icons remain upright while the parent <div> is rotated, I encountered unexpected alignment problems.
Here is the code I have used:
see in codepane
.container {
transform: rotate(45deg);
display: grid;
grid-template-columns: repeat(2, 250px);
grid-template-rows: repeat(2, 250px);
justify-content: center;
}
.container h2,
.container p,
.container svg {
transform: rotate(-45deg);
}<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>
<div class=" container ">
<div class="m-3 flex flex-col items-center justify-center rounded-xl border-2 border-yellow-300 p-5 ">
<svg height="32" width="32" id="translation" viewBox="0 0 128 128">
<path d="M 55 1 C 49.5 1 45 5.5 45 11 L 45 46 L 14 46 C 6.8 46 1 51.8 1 59 L 1 114 C 1 121.2 6.8 127 14 127 L 56.900391 127 C 58.600391 127 59.900391 125.7 59.900391 124 C 59.900391 122.3 58.600391 121 56.900391 121 L 14 121 C 10.1 121 7 117.9 7 114 L 7 59 C 7 55.1 10.1 52 14 52 L 69 52 C 72.9 52 76 55.1 76 59 L 76 103.19922 C 76 110.09922 78.8 116.4 83.5 121 L 81.099609 121 C 77.299609 121 73.799609 119.50039 71.099609 116.90039 C 69.899609 115.70039 68.000391 115.70039 66.900391 116.90039 C 65.700391 118.10039 65.700391 119.99961 66.900391 121.09961 C 70.700391 124.89961 75.699609 127 81.099609 127 L 94 127 C 95.5 127 96.7 125.9 97 124.5 C 97.2 123 96.4 121.59922 95 121.19922 C 87.3 118.59922 82.099609 111.39922 82.099609 103.19922 L 82.099609 76 L 98 76 C 102.5 76 106.89961 74.2 110.09961 71 C 113.29961 74.2 117.59922 76 122.19922 76 L 124.59961 76 C 127.29961 76 128.59922 72.700781 126.69922 70.800781 C 122.49922 66.800781 120 61.199219 120 55.199219 L 120 11 C 120 5.5 115.5 1 110 1 L 55 1 z M 83 10 C 84.2 10 85.400781 10.800391 85.800781 11.900391 L 100.80078 51.900391 C 101.40078 53.500391 100.59961 55.200781 99.099609 55.800781 C 98.699609 55.900781 98.4 56 98 56 C 96.8 56 95.599219 55.299609 95.199219 54.099609 L 92.199219 46 L 69 46 L 67.400391 46 L 80.199219 11.900391 C 80.599219 10.700391 81.8 10 83 10 z M 83 23.5 L 76.099609 42 L 89.900391 42 L 83 23.5 z M 37.501953 60.646484 C 36.119727 60.658789 34.862109 61.6 34.599609 63 C 34.499609 63.3 34.099219 65.400391 33.699219 68.900391 L 24.599609 68.900391 C 22.899609 68.900391 21.599609 70.200391 21.599609 71.900391 C 21.599609 73.600391 22.899609 74.900391 24.599609 74.900391 L 33.199219 74.900391 C 32.999219 77.300391 33 80.1 33 83 C 30.8 83.9 28.800391 85.000391 26.900391 86.400391 C 22.600391 89.600391 19.800781 93.900781 19.300781 98.300781 C 18.900781 101.80078 19.899219 105.2 22.199219 108 C 24.899219 111.3 28.600781 112.69922 32.300781 112.69922 C 35.400781 112.69922 38.500391 111.70039 40.900391 109.90039 C 47.000391 105.40039 51.299609 95.899609 53.599609 89.599609 C 54.099609 90.099609 54.500391 90.599219 54.900391 91.199219 C 58.900391 97.299219 55.900391 101.00039 50.400391 106.40039 C 50.100391 106.70039 49.700391 107.00039 49.400391 107.40039 C 48.200391 108.60039 48.200391 110.49961 49.400391 111.59961 C 50.600391 112.79961 52.499609 112.79961 53.599609 111.59961 L 54.5 110.69922 C 59 106.19922 66.700391 98.700391 59.900391 87.900391 C 58.800391 86.100391 57.3 84.600391 55.5 83.400391 C 55.5 83.300391 55.599609 83.199219 55.599609 83.199219 C 55.999609 81.599219 55.1 80 53.5 79.5 C 52.1 79.1 50.6 79.799609 50 81.099609 C 49.7 80.999609 49.399609 81.000391 49.099609 80.900391 C 45.899609 80.300391 42.400391 80.399609 38.900391 81.099609 C 38.900391 78.799609 38.999609 76.700781 39.099609 74.800781 L 59.800781 74.800781 C 61.500781 74.800781 62.800781 73.500781 62.800781 71.800781 C 62.800781 70.100781 61.500781 68.800781 59.800781 68.800781 L 39.699219 68.800781 C 40.099219 65.900781 40.400391 64.199219 40.400391 64.199219 C 40.700391 62.599219 39.699609 60.999219 38.099609 60.699219 C 37.899609 60.661719 37.699414 60.644727 37.501953 60.646484 z M 44.599609 86.5 C 45.799609 86.5 46.9 86.600781 48 86.800781 L 48.199219 86.800781 C 46.599219 91.200781 44.199219 96.700781 41.199219 100.80078 C 39.999219 96.200781 39.399609 91.599219 39.099609 87.199219 C 40.999609 86.799219 42.799609 86.5 44.599609 86.5 z M 33.199219 89.300781 C 33.599219 94.500781 34.600781 100 36.300781 105.5 C 33.700781 106.9 29.500781 107.3 26.800781 104 C 25.500781 102.5 24.999219 100.70078 25.199219 98.800781 C 25.499219 96.100781 27.500391 93.2 30.400391 91 C 31.300391 90.4 32.199219 89.800781 33.199219 89.300781 z M 107 121 A 3 3 0 0 0 104 124 A 3 3 0 0 0 107 127 A 3 3 0 0 0 110 124 A 3 3 0 0 0 107 121 z">
</path>
</svg>
<h2>25</h2>
<p class="text-xl">languages</p>
</div>
<div class="m-3 flex flex-col items-center justify-center rounded-xl border-2 border-yellow-300 p-5">
<svg height="32" width="32" id="teacher" viewBox="0 0 24 24">
<path d="M 4 2 A 2 2 0 0 0 4 6 A 2 2 0 0 0 4 2 z M 8 3 L 8 5 L 18 5 L 18 14 L 16 14 L 16 12 L 12 12 L 12 14 L 9 14 L 9 16 L 21 16 L 21 14 L 20 14 L 20 4.5 C 20 3.67 19.33 3 18.5 3 L 8 3 z M 3 7 C 1.89 7 1 7.89 1 9 L 1 16 L 1 22 L 3 22 L 3 16 L 5 16 L 5 22 L 7 22 L 7 16 L 7 9 L 13 9 L 13 7 L 3 7 z">
</path>
</svg>
<h2>37</h2>
<p class="text-xl text-secondary-light-200">teachers</p>
</div>
<div class="m-3 flex flex-col items-center justify-center rounded-xl border-2 border-yellow-300 p-5">
<svg height="32" width="32" id="diploma" viewBox="0 0 24 24">
<path d="M 5 2 C 3.346 2 2 3.346 2 5 L 2 7 L 4 7 L 4 20 L 9 20 L 9 18 L 6 18 L 6 7 L 17 7 L 17 5 C 17 4.449 17.448 4 18 4 C 18.56503 4 19 4.4349698 19 5 L 19 20 L 21 20 L 21 5 C 21 3.3550302 19.64497 2 18 2 L 5 2 z M 8 10 L 8 12 L 17 12 L 17 10 L 8 10 z M 8 14 L 8 16 L 10 16 L 10 14 L 8 14 z M 14 14 C 12.35499 14 11 15.35499 11 17 C 11 17.876407 11.391843 18.662168 12 19.212891 L 12 22.804688 L 14 21.554688 L 16 22.804688 L 16 19.212891 C 16.608157 18.662168 17 17.876407 17 17 C 17 15.35499 15.64501 14 14 14 z M 14 16 C 14.564129 16 15 16.435871 15 17 C 15 17.564129 14.564129 18 14 18 C 13.435871 18 13 17.564129 13 17 C 13 16.435871 13.435871 16 14 16 z">
</path>
</svg>
<h2>2640</h2>
<p class=" z-10 text-xl text-secondary-light-200">graduate</p>
</div>
<div class="m-3 flex flex-col items-center justify-center rounded-xl border-2 border-yellow-300 p-5">
<svg height="32" width="32" id="student" viewBox="0 0 24 24">
<path d="M 12 0.88085938 L 1.7597656 6 L 5 7.6191406 L 5 12.130859 C 4.22 12.770859 3.8405469 13.809844 4.0605469 14.839844 C 4.2805469 15.859844 5.0896094 16.650156 6.0996094 16.910156 C 6.6096094 19.230156 9.06 21 12 21 C 12.71 21 13.37 20.900937 14 20.710938 L 14 18.589844 C 13.41 18.849844 12.73 19 12 19 C 9.79 19 8 17.65 8 16 L 8 15 L 6.8203125 15 C 6.4303125 15 6.0895313 14.749688 6.0195312 14.429688 C 5.9295313 14.009687 6.1596875 13.700313 6.4296875 13.570312 L 7 13.300781 L 7 11 C 7 10.45 7.45 10 8 10 L 16 10 C 16.55 10 17 10.45 17 11 L 17 13.300781 L 17.570312 13.570312 C 17.740313 13.650313 17.890937 13.8 17.960938 14 L 19.980469 14 C 19.920469 13.27 19.56 12.600859 19 12.130859 L 19 7.6191406 L 22.240234 6 L 12 0.88085938 z M 19 16 L 19 19 L 16 19 L 16 21 L 19 21 L 19 24 L 21 24 L 21 21 L 24 21 L 24 19 L 21 19 L 21 16 L 19 16 z">
</path>
</svg>
<h2>4500</h2>
<p class="z-10 text-xl text-secondary-light-200">students </p>
</div>
</div>
2
Answers
I just wrap the children in div wrapper and rotate the wrapper
see my codepane for the full solution .
It looks like you are rotating every element (h2, p, svg) separately. Instead, try wrapping them in another container and rotating the whole inner container with its contents. You might have to add your alignment classes to the inner container as well.
Example:
Hope this helps!