@property --rotateX {  
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --rotateX1 {  
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --rotateX2 {  
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --rotateX3 {  
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --rotateX4 {  
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --rotateY {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --rotateY1 {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --rotateY2 {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --rotateY3 {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --rotateY4 {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --rotateZ {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --rotateZ1 {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --rotateZ2 {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --rotateZ3 {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --rotateZ4 {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --translateX {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --translateY {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --translateZ {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --scale {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}
.matrix3D {
  /* Default settings */
  --rotateX: 0; 
  --rotateY: 0; 
  --rotateZ: 0; 
  --translateX: 0; 
  --translateY: 0;
  --translateZ: 0;
  --scale: 1;  

  /* Trig values for 3D Matrix */
  --rotateX1: cos(calc(var(--rotateX) * 1deg));
  --rotateX2: sin(calc(var(--rotateX) * 1deg));
  --rotateX3: sin(calc(var(--rotateX) * -1deg));
  --rotateX4: cos(calc(var(--rotateX) * 1deg));

  --rotateY1: cos(calc(var(--rotateY) * 1deg));
  --rotateY2: sin(calc(var(--rotateY) * 1deg));
  --rotateY3: sin(calc(var(--rotateY) * -1deg));
  --rotateY4: cos(calc(var(--rotateY) * 1deg));

  --rotateZ1: cos(calc(var(--rotateZ) * 1deg));
  --rotateZ2: sin(calc(var(--rotateZ) * 1deg));
  --rotateZ3: sin(calc(var(--rotateZ) * -1deg));
  --rotateZ4: cos(calc(var(--rotateZ) * 1deg));

  /* Apply calculated values to matrix3D */
  transform: matrix3d(
    calc(var(--rotateY1) * var(--rotateZ1)), var(--rotateZ2), var(--rotateY2), 0,
    var(--rotateZ3), calc(var(--rotateX1) * var(--rotateZ4)), var(--rotateX2), 0,
    var(--rotateY3), var(--rotateX3), calc(var(--rotateX4) * var(--rotateY4)), 0,
    var(--translateX), var(--translateY), var(--translateZ), calc(1 / var(--scale) )
  );
}