<!-- nosimple -->
<div x-data="{modalShow: false}">
    <button @click="modalShow = true" class="button">Open Modal (rotate)</button>

    <div x-show="modalShow" x-transition:enter="animation-rotatein" x-transition:leave="animation-rotateout" class="pos-fixed pos0-l pos0-t h100 w100 z-index99 bg-op60" x-cloak>
    	<div @click.away="modalShow = false" class="pos-absolute w100 bg-white w600px-max" style="left: 50%; top: 50%; transform: translate(-50%, -50%);">

            <span @click="modalShow = false" class="pos-absolute pos10-r pos0-t t150 t-white hover-t-gray200 cursor-pointer">×</span>

            <div class="pad10 bg-blue600 t-white">Header</div>
            <div class="pad20-tb pad10-rl">Content</div>
            <div class="pad10 bg-gray100 t-gray600">Footer</div>
        </div>
    </div>
</div>
<!-- /nosimple -->