diff --git a/components/style/properties/helpers/animated_properties.mako.rs b/components/style/properties/helpers/animated_properties.mako.rs
index 3b75b4ee07b3..55ea436b5da9 100644
--- a/components/style/properties/helpers/animated_properties.mako.rs
+++ b/components/style/properties/helpers/animated_properties.mako.rs
@@ -663,9 +663,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 fff9517a8b1b..19abc30928d4 100644
--- a/tests/wpt/mozilla/meta/MANIFEST.json
+++ b/tests/wpt/mozilla/meta/MANIFEST.json
@@ -4516,6 +4516,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",
@@ -11604,6 +11616,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 000000000000..a05f75c44ac2
--- /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 000000000000..84a9fea14ef6
--- /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>
+
