<div> This is DOM content.</div>
body, html {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}

body {
    perspective: 800px;
}

canvas { display: block; }

body, body > div {
    transform-style: preserve-3d;
}

div {
    width: 100px;
    height: 100px;
    background: pink;
    opacity: 0.5;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
}
import * as THREE from 'https://unpkg.com/three@0.116.1/build/three.module.js'
import {OrbitControls} from 'https://unpkg.com/three@0.116.1/examples/jsm/controls/OrbitControls.js'

var mesh, renderer, scene, camera, controls, mesh;
var rotationY = 0
var cameraZ = 20
var perspective = 800
var div = document.querySelector('div')

document.body.style.perspective = `${perspective}px`

init();
animate();

function init() {

    // renderer
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setPixelRatio( window.devicePixelRatio ); // RESOLUTION
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    // scene
    scene = new THREE.Scene();

    // camera
    const fov = 180 * ( 2 * Math.atan( innerHeight / 2 / perspective ) ) / Math.PI
    camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.set( 0, 0, perspective );

    // controls
    controls = new OrbitControls( camera, document );

    // ambient
    scene.add( new THREE.AmbientLight( 0x222222 ) );

    // light
    var light = new THREE.DirectionalLight( 0xffffff, 1 );
    light.position.set( 0, 20, 0 );
    scene.add( light );

    const geom = new THREE.BoxBufferGeometry( 100, 100, 0.0001 );
    const mat = new THREE.MeshBasicMaterial( { color: 'skyblue' } );
    mesh = new THREE.Mesh( geom, mat );
    mesh.position.set( 0, 0, 0 );

    scene.add( mesh, camera );

}

function animate() {

    requestAnimationFrame( animate );

    controls.update();
    
    rotationY++
    div.style.transform = 'translate3d(-50%, -50%, 0) rotateY('+rotationY+'deg)'
    mesh.rotation.y = rotationY / 180 * Math.PI

    renderer.render( scene, camera );

}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.