JSFiddle - React, Tailwind, and code Playground

by mlatti

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r119/three.min.js"></script>
<script src="https://threejs.org/examples/js/renderers/CSS3DRenderer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/12/Tween.js"></script>
<div id="cssContainer" class="container"> </div>
    <canvas id="webglContainer" class="container"> </canvas>
	<div id="canvas1" style = "opacity:0">
		<div class="container">
		  <div id="card1" style class="content-card">
		    <div class="content-wrapper">
		      <h5>Adapt your menu items</h5>
		      <p>Easily adapt your menu using the webflow CMS and allow customers to browse your items.</p>
		  	</div>
		  </div>
		</div>
	</div>

JavaScript

var cssObject;
			var light;
			var camera, webglScene, webglRenderer, cssContainer, webglContainer;
			var cssScene, cssRenderer;

		    init();
			function init() {

				camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 0.01, 100 );
				camera.lookAtPoint = new THREE.Vector3(0,0,0);	

				initRenderers();

			    var light1 = new THREE.DirectionalLight( 0xefefff, 0.70 );
			    webglScene.add( light1 );
				
				camera.position.set(0,12,0);
				camera.lookAt(new THREE.Vector3(0,0,0));
				camera.rotation.x = -1.5707963267948963;
				camera.updateProjectionMatrix();

				cssObject = createcssObject("card1");
				cssObject.element.style.filter = "blur("+0+"px)";
				tweenContinouslyRotateCssObject(cssObject, 0.6);
				animate();
			}

			function animate() {
				requestAnimationFrame( animate );
					
				TWEEN.update();
		
				webglRenderer.render( webglScene, camera );
				cssRenderer.render( cssScene, camera );
			}

			function initRenderers(){
				cssContainer = document.getElementById( 'cssContainer' );
				webglContainer = document.getElementById( 'webglContainer' );

				webglScene = new THREE.Scene();
				webglScene.background = new THREE.Color( "white" );
				webglRenderer = new THREE.WebGLRenderer({ canvas:webglContainer, alpha: true, antialias: true });
				webglRenderer.setClearColor( 0x000000, 0 );
				webglRenderer.setSize( window.innerWidth, window.innerHeight );
			    webglRenderer.domElement.style.position = 'absolute';
			    webglRenderer.domElement.style.zIndex = "-10";

				cssScene = new THREE.Scene();
				cssRenderer = new THREE.CSS3DRenderer();
				cssRenderer.setSize( window.innerWidth, window.innerHeight );
			    cssRenderer.domElement.style.position = 'absolute';
			    cssRenderer.domElement.style.zIndex = "0";
				cssContainer.appendChild( cssRenderer.domElement );
			}


			function tweenContinouslyRotateCssObject(cssObject, offset){
				///
				var from = {
					y :...