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.

This experiment was created by Keith Clark and is based on Mr.doob's model-tag work. Feel free to contact me on twitter if you have questions.

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

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

<x-model class="model" src="models/LeePerrySmith.obj"></x-model>

TODO:

Workaround scrollTop issues in Safari
Support nested transforms
Calculate perspective from CSS value (it's hardcoded at the moment)
Honour perspective-origin
Make models fit the bounding element
Performance!

Perspective test

Animation test

Scroll test

Scroll horizontally

Transform test

State test (:hover)

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