Custom element for rendering 3D models and controlling them with CSS

This is test page for a prototype <model> custom element. The model element allows 3D objects to be loaded into a document and rendered inline, just like any other visual resource. Additionally, any CSS transforms applied to a <model> element will be passed on the model, allowing complex objects to be placed and maniplulated using just CSS.

<style>
.model {
  width: 50vw;
  height: 50vw;
  animation: 5s spin linear infinite;
}

@keyframes spin {
  to {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}
<style>

<x-model class="model" src="../assets/models/gltf/duck/Duck.gltf"></x-model>

Object loader test

Translate test

Rotate test

Scale test

Animation test

Nested transform test

Nested transform test 3

This test uses a 4 nested elements, each with an animation. Negative margin values are used to center the model.

Origin test

Perspective test

Perspective scrolling test

Scroll horizontally

State test (:hover)

This is a Keith Clark experiment. Feel free to contact me on twitter if you have questions.