kentaromiura / transform-3d

A transform3d custom element

transform-3d

A transform3d custom element

This is a custom component that you can use to apply 3d transforms on browser that implements the w3c transform functions spec it supports:

• rotate
• rotateX
• rotateY
• rotateZ
• perspective
• skew
• skewX
• skewY
• translateX
• translateY
• translateZ
• scale
• scaleX
• scaleY
• scaleZ

Live Demo

live demo - thanks to David Walsh for the assets

transform-3d's Issues

do not need to create a transform every time

this https://github.com/kentaromiura/transform-3d/blob/master/Source/applyTransforms.js#L21 can be improved, especially for attribute changes, ideally it should reuse the same one

change attributes inside a attributeChange handler ain't gonna work

no matter how much Observer can save such weak logic, it's an infinite loop eventually delayed.

node.attributeChangedCallback(
      attributeName,
      prevValue,
      newValue
);

If the attributeName is style it's your code changing such attribute inside the attributeChangedCallback callback and while native might avoid blocking this circle your code will run gazillion times for no reason anyway.

Id' rather early return when the property, if any, is related to the style itself and named as such.

possible optimisation by using only the attribute that changes

on attribute change callback, requires keeping status of the property that has already changed.