CSS3DRenderer - Verge3D User Manual - Soft8Soft
Description: Learn how to use CSS3DRenderer in your interactive 3D apps made with Verge3D

# CSS3DRenderer

CSS3DRenderer can be used to apply hierarchical 3D transformations to HTML elements. This renderer is useful to combine HTML elements with WebGL content, e.g. to embed whole websites, YouTube videos, or custom web UI into a 3D scene.

The CSS3DRenderer operates with HTML elements, not regular Verge3D objects. These elements should be wrapped into special objects CSS3DObject and then added to the scene graph.

## Example

`if (!app.cssRenderer) app.enableCSSRenderer(); // place renderer above 3D canvas app.cssRenderer.viewElement.style.zIndex = 0; const iframe = document.createElement('iframe'); iframe.src = 'https://www.soft8soft.com'; iframe.style.border = 'none'; iframe.width = 800; iframe.height = 600; const cssObject = new v3d.CSS3DObject(iframe); // 5 units width cssObject.scale.setScalar(5/iframe.width); app.cssScene.add(cssObject);`

## Constructor

### CSS3DRenderer(domElement : HTMLElement)

element — an HTML element where the renderer appends its child-elements.

This corresponds to the domElement property below.

## Properties

### # .domElement : HTMLElement

An HTMLElement where the renderer appends its child-elements.

### # .viewElement : HTMLElement

An HTMLElement representing viewing plane (created automatically by constructor).

## Methods

### # .getSize() → Object

Returns an object containing the width and height of the renderer.

### # .render(scene : Scene, camera : Camera)

Renders a scene using a perspective or orphographic camera.

### # .setSize(width : Float, height : Float)

Resizes the renderer to specified width and height.

## Puzzles

There is a puzzle create object / plane with html to create planes which render HTML-based resources, such as websites, custom UIs, or YouTube videos. This puzzle uses CSS3DRenderer under the hood.

## Source

For more info on how to obtain the source code of this module see this page.