Tutorial by Examples: cube

3D transforms can be use to create many 3D shapes. Here is a simple 3D CSS cube example: HTML: <div class="cube"> <div class="cubeFace"></div> <div class="cubeFace face2"></div> </div> CSS: body { perspective-origin: 5...
This is the basic HTML file that can be used as a boilerplate when starting a project. This boilerplate uses orbit controls with damping (camera that can move around an object with deceleration effect) and creates a spinning cube. <!DOCTYPE html> <html> <head> <t...
The ROLLUP operator is useful in generating reports that contain subtotals and totals. CUBE generates a result set that shows aggregates for all combinations of values in the selected columns. ROLLUP generates a result set that shows aggregates for a hierarchy of values in the selected col...
Considering the following case: We have user event data with 4 dimensions: A/B Test bucket (prod/test) client Type (web/mobile) module (order/report) event (click/view) test mobile order_module click prod web order_module view prod mobile order_module click ...
var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); var geo...
var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 50); camera.position.z = 25; var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElemen...
This example shows how to create a cube using 2D transformation methods skewX() and skewY() on pseudo elements. HTML: <div class="cube"></div> CSS: .cube { background: #dc2e2e; width: 100px; height: 100px; position: relative; margin: 50px; } .cube::be...

Page 1 of 1