I know it is to late for the OP, but for all others coming across this question:
I was able to solve it by using a <div> inside the body that is emulating the body's scrollbars.
<html>
<head>
<style>
body {
padding: 0;
margin: 0;
}
body > * {
overflow: auto;
width: 100%;
height: 100%;
position: absolute;
perspective: 1000px;
}
</style>
</head>
<body>
<div>
3d objects
</div>
</body>
</html>
Full example:
<html>
<head>
<style>
body {
padding: 0;
margin: 0;
}
body > * {
overflow: auto;
width: 100%;
height: 100%;
position: absolute;
perspective: 1000px;
}
div#container {
width: 200%;
transform-style: preserve-3d;
}
#t,
#b,
#l,
#r {
margin-left: 45%;
margin-right: 45%;
width: 100px;
height: 100px;
background-color: yellow;
border: 10px solid black;
border-radius: 10px;
transform-style: preserve-3d;
}
#t {
transform: rotateX(270deg);
}
#b {
transform: rotateX(90deg);
}
#l {
position: relative;
top: 180px;
left: -60px;
transform: rotateY(270deg);
}
#r {
position: relative;
top: -180px;
left: 60px;
transform: rotateY(90deg);
}
</style>
</head>
<body>
<div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="container">
<div id="l">
<h1>left</h1>
</div>
<div id="t">
<h1>top</h1>
</div>
<div id="b">
<h1>bottom</h1>
</div>
<div id="r">
<h1>right</h1>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>
</html>