TAG
CSS
Result
Run
License
<h2>The perspective-origin Property</h2> <h3>perspective-origin: left:</h3> <div id="frame1" class="frame"> FRAME 1 <div class="target">BOX</div> </div> <h3>perspective-origin: bottom right:</h3> <div id="frame2" class="frame"> FRAME 2 <div class="target">BOX</div> </div> <h3>perspective-origin: -100%:</h3> <div id="frame3" class="frame"> FRAME 3 <div class="target">BOX</div> </div>
.frame { border: 1px solid #0000FF; position: relative; width: 100px; height: 100px; left: 100px; perspective: 200px; } .target { position: absolute; bottom: 0; width: 70px; height: 70px; border: 1px solid #FF0000; transform-style: perserve-3d; transform: rotateX(45deg); line-height: 70px; text-align: center; } #frame1 { perspective-origin: left; } #frame2 { perspective-origin: bottom right; } #frame3 { perspective-origin: -100%; }
Console
expand_less
License
License
by DevDic
Close