TAG
CSS
Result
Run
License
<div class="box box1" title="translateZ(-100px)"></div> <div class="box target">Rollover me</div> <div class="box box2" title="scaleZ(2) translateZ(-100px)"></div> <div class="box target2">Rollover me</div>
.box { width: 100px; height: 100px; position: absolute; top: calc(50vh - 50px); border: 1px solid #CCC; transition: .3s; } .box::after { content: attr(title); position: absolute; bottom: -50px; } .box1, .target { left: calc(50vw - 100px); } .box2, .target2 { left: calc(50vw + 100px); } .target { border: 1px solid #FF0000; text-align: center; } .target2 { border: 1px solid #00FF00; text-align: center; } .target:hover { transform: perspective(400px) translateZ(-100px); } .target2:hover { transform: perspective(400px) scaleZ(2) translateZ(-100px); }
Console
expand_less
License
License
by DevDic
Close