<!DOCTYPE html>
<!--
The perspective origin should be centered in the container's border box,
regardless of the presence of scrollbars.
-->
<style>
.container {
background-color: green;
border: 10px solid black;
overflow: hidden;
position: relative;
width: 100px;
height: 100px;
margin: 10px 0;
perspective: 500px;
}
.scroller {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: scroll;
}
.transformed {
background-color: blue;
width: 50px;
height: 50px;
transform: translateZ(-1000px);
}
</style>
<div class="container">
<div class="transformed"></div>
<div class="scroller"></div>
</div>
<!-- This blue box should be smaller because it should be obscured by the border. -->
<div class="container" style="perspective-origin: 0 0">
<div class="transformed"></div>
<div class="scroller"></div>
</div>
<div class="container" style="perspective-origin: 60% 40px">
<div class="transformed"></div>
<div class="scroller"></div>
</div>