回転うんこCSSの開発に成功した

#動機
ページのタイトルをみて兄者たちは何のことを言っているのかさっぱりわからないと思われる。頭のおかしいヤツがいると思われたら悲しいので、説明させてください。

画像を見ればすべての疑問は氷解するハズ。

やったぜ！
#実装内容

    <style>
        .circlenizer{
            overflow: hidden;
            border-radius:50%;
            background-color: rgb(82, 22, 22);
            color:whitesmoke;
            box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .8);
        }
        .circlenizer__edit-area{
            width:200%;
            height:200%;
            position: relative;
            top:-50%;
            left:-50%;
        }
        .circlenizer__edit-area__transform{
            transform: rotate(-45deg);
            top:14.5%;
            left:14.5%;
            width:71%;
            height:71%;
            display:table;
            overflow: hidden;
            position:relative;
            transform-origin: center;
        }
        .circlenizer__edit-area__transform__target{
            display:table-cell;
            vertical-align: middle;
            text-align:center;
        }
    </style>
    <div class="circlenizer" style="height:100px;width:100px;margin:50px;">
        <div class="circlenizer__edit-area">
            <div class="circlenizer__edit-area__transform">
                <div class="circlenizer__edit-area__transform__target">
                    <span style="font-size:50px;">💩</span>
                </div>
            </div>
        </div>
    </div>

#苦労した点
💩を真ん中に寄せるのが案外難しかった。
vertical-alignはtable-cellに効くけど、display:table-cellにheight,widthでパーセントが効かないので、中間にdisplay:tableを挟むことで何とかなった。
#説明
まあ、回転させるだけなら割と簡単にできるのだけど、なるべく汎用的なCSSにしたかった。
なので一応全部パーセント指定でいい感じになっていて、circlenizerブロックにだけwidth,heightを指定してあげればいい感じに動く、circlenizer__edit-area__transformのところをぐりぐり動かせば、いろいろな角度だったりおっきな💩が楽しめるのでどうだろうか。

#まとめ
私は頭がおかしくありません。（主張）