diff --git a/components/style/properties/helpers/animated_properties.mako.rs b/components/style/properties/helpers/animated_properties.mako.rs
index 404698968b8..1043aaf24bc 100644
--- a/components/style/properties/helpers/animated_properties.mako.rs
+++ b/components/style/properties/helpers/animated_properties.mako.rs
@@ -606,9 +606,18 @@ fn interpolate_transform_list(from_list: &[TransformOperation],
                     result.push(TransformOperation::Scale(ix, iy, iz));
                 }
                 (&TransformOperation::Rotate(fx, fy, fz, fa),
-                 &TransformOperation::Rotate(_tx, _ty, _tz, _ta)) => {
-                    // TODO(gw): Implement matrix decomposition and interpolation
-                    result.push(TransformOperation::Rotate(fx, fy, fz, fa));
+                 &TransformOperation::Rotate(tx, ty, tz, ta)) => {
+                    let norm_f = ((fx * fx) + (fy * fy) + (fz * fz)).sqrt();
+                    let norm_t = ((tx * tx) + (ty * ty) + (tz * tz)).sqrt();
+                    let (fx, fy, fz) = (fx / norm_f, fy / norm_f, fz / norm_f);
+                    let (tx, ty, tz) = (tx / norm_t, ty / norm_t, tz / norm_t);
+                    if fx == tx && fy == ty && fz == tz {
+                        let ia = fa.interpolate(&ta, time).unwrap();
+                        result.push(TransformOperation::Rotate(fx, fy, fz, ia));
+                    } else {
+                        // TODO(gw): Implement matrix decomposition and interpolation
+                        result.push(TransformOperation::Rotate(fx, fy, fz, fa));
+                    }
                 }
                 (&TransformOperation::Perspective(fd),
                  &TransformOperation::Perspective(_td)) => {
diff --git a/tests/wpt/mozilla/meta/MANIFEST.json b/tests/wpt/mozilla/meta/MANIFEST.json
index 94676a48fdc..f716074916e 100644
--- a/tests/wpt/mozilla/meta/MANIFEST.json
+++ b/tests/wpt/mozilla/meta/MANIFEST.json
@@ -4540,6 +4540,18 @@
             "url": "/_mozilla/css/root_pseudo_a.html"
           }
         ],
+        "css/rotate_anim.html": [
+          {
+            "path": "css/rotate_anim.html",
+            "references": [
+              [
+                "/_mozilla/css/rotate_anim_ref.html",
+                "=="
+              ]
+            ],
+            "url": "/_mozilla/css/rotate_anim.html"
+          }
+        ],
         "css/rtl_body.html": [
           {
             "path": "css/rtl_body.html",
@@ -11696,6 +11708,18 @@
           "url": "/_mozilla/css/root_pseudo_a.html"
         }
       ],
+      "css/rotate_anim.html": [
+        {
+          "path": "css/rotate_anim.html",
+          "references": [
+            [
+              "/_mozilla/css/rotate_anim_ref.html",
+              "=="
+            ]
+          ],
+          "url": "/_mozilla/css/rotate_anim.html"
+        }
+      ],
       "css/rtl_body.html": [
         {
           "path": "css/rtl_body.html",
diff --git a/tests/wpt/mozilla/tests/css/rotate_anim.html b/tests/wpt/mozilla/tests/css/rotate_anim.html
new file mode 100644
index 00000000000..a05f75c44ac
--- /dev/null
+++ b/tests/wpt/mozilla/tests/css/rotate_anim.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>Rotation transformation</title>
+<link rel="match" href="rotate_anim_ref.html">
+<style>
+  div {
+    padding: 200px;
+    transform: rotate(90deg);
+    transition: transform 0s linear;
+  }
+
+  div.active {
+    transform: rotate(180deg);
+  }
+</style>
+<div>Hello Servo!</div>
+<script>
+var html = document.getElementsByTagName("html")[0];
+var div = document.getElementsByTagName("div")[0];
+requestAnimationFrame(function() {
+    div.className = "active";
+    requestAnimationFrame(function() {});
+});
+</script>
+
diff --git a/tests/wpt/mozilla/tests/css/rotate_anim_ref.html b/tests/wpt/mozilla/tests/css/rotate_anim_ref.html
new file mode 100644
index 00000000000..84a9fea14ef
--- /dev/null
+++ b/tests/wpt/mozilla/tests/css/rotate_anim_ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<title>Rotation transformation reference</title>
+<style>
+  div {
+    padding: 200px;
+    transform: rotate(180deg);
+    transition: transform 1s linear;
+  }
+</style>
+<div>Hello Servo!</div>
+
