TAG
CSS
Result
Run
License
<div class="box">Rollover me</div>
:root { --R: calc(pi * 2 / 360); /* pi is 3.141592653589793 */ --angle: 15; } .box { position: absolute; width: 150px; height: 100px; inset-inline-start: calc((100vw - 150px) / 2); inset-block-start: calc((100vh - 100px) / 2); background-color: #999; transition: 0.3s; display: flex; align-items: center; justify-content: center; } .box:hover { transform: matrix( 1, 0, tan(calc(var(--angle) * var(--R))), 1, 0, 0 ); }
Console
expand_less
License
License
by DevDic
Close