Add pespective back. (#26486)

ampproject · Jan 24, 2020 · bc70f76 · bc70f76
1 parent a91a37c
commit bc70f76
Showing 1 changed file with 9 additions and 9 deletions.
diff --git a/extensions/amp-story/1.0/amp-story-desktop-panels.css b/extensions/amp-story/1.0/amp-story-desktop-panels.css
@@ -29,23 +29,23 @@ amp-story[standalone].i-amphtml-story-desktop-panels {
 
 .i-amphtml-story-desktop-panels amp-story-page.i-amphtml-element {
   /* Pages are stacked to the right side of the screen and then animated in. */
-  transform: scale(0.9) translateX(calc(250% + 192px)) translateY(0%) !important;
+  transform: perspective(1px) scale(0.9) translateX(calc(250% + 192px)) translateY(0%) !important;
   opacity: 0.05 !important;
   transform-origin: left !important;
   border-radius: 0 !important;
   box-shadow: none !important;
 }
 
 [dir=rtl] .i-amphtml-story-desktop-panels amp-story-page.i-amphtml-element {
-  transform: scale(0.9) translateX(calc(-350% - 192px)) translateY(0%) !important;
+  transform: perspective(1px) scale(0.9) translateX(calc(-350% - 192px)) translateY(0%) !important;
 }
 
 .i-amphtml-story-desktop-panels amp-story-page[i-amphtml-visited] {
-  transform: scale(0.9) translateX(calc(-350% - 192px)) translateY(0%) !important;
+  transform: perspective(1px) scale(0.9) translateX(calc(-350% - 192px)) translateY(0%) !important;
 }
 
 [dir=rtl] .i-amphtml-story-desktop-panels amp-story-page[i-amphtml-visited] {
-  transform: scale(0.9) translateX(calc(250% + 192px)) translateY(0%) !important;
+  transform: perspective(1px) scale(0.9) translateX(calc(250% + 192px)) translateY(0%) !important;
 }
 
 .i-amphtml-story-desktop-panels amp-story-page[i-amphtml-desktop-position="-2"],
@@ -61,34 +61,34 @@ amp-story[standalone].i-amphtml-story-desktop-panels {
 
 .i-amphtml-story-desktop-panels amp-story-page[i-amphtml-desktop-position="-2"],
 [dir=rtl] .i-amphtml-story-desktop-panels amp-story-page[i-amphtml-desktop-position="2"] {
-  transform: scale(0.9) translateX(calc(-5 * var(--i-amphtml-story-page-50vw, 50%) - 128px)) translateY(0%) !important;
+  transform: perspective(1px) scale(0.9) translateX(calc(-5 * var(--i-amphtml-story-page-50vw, 50%) - 128px)) translateY(0%) !important;
 }
 
 .i-amphtml-story-desktop-panels amp-story-page[i-amphtml-desktop-position="-1"],
 .i-amphtml-story-desktop-panels .prev-container > .i-amphtml-story-page-sentinel,
 [dir=rtl] .i-amphtml-story-desktop-panels amp-story-page[i-amphtml-desktop-position="1"],
 [dir=rtl] .i-amphtml-story-desktop-panels .next-container > .i-amphtml-story-page-sentinel {
-  transform: scale(0.9) translateX(calc(-3 * var(--i-amphtml-story-page-50vw, 50%) - 64px)) translateY(0%) !important;
+  transform: perspective(1px) scale(0.9) translateX(calc(-3 * var(--i-amphtml-story-page-50vw, 50%) - 64px)) translateY(0%) !important;
 }
 
 .i-amphtml-story-desktop-panels amp-story-page[active],
 [dir=rtl] .i-amphtml-story-desktop-panels amp-story-page[active],
 .i-amphtml-story-desktop-panels amp-story-page[i-amphtml-desktop-position="0"],
 [dir=rtl] .i-amphtml-story-desktop-panels amp-story-page[i-amphtml-desktop-position="0"] {
-  transform: scale(1.0) translateX(calc(-1 * var(--i-amphtml-story-page-50vw, 50%))) translateY(0%) !important;
+  transform: perspective(1px) scale(1.0) translateX(calc(-1 * var(--i-amphtml-story-page-50vw, 50%))) translateY(0%) !important;
   opacity: 1 !important;
 }
 
 .i-amphtml-story-desktop-panels amp-story-page[i-amphtml-desktop-position="1"],
 .i-amphtml-story-desktop-panels .next-container > .i-amphtml-story-page-sentinel,
 [dir=rtl] .i-amphtml-story-desktop-panels amp-story-page[i-amphtml-desktop-position="-1"],
 [dir=rtl] .i-amphtml-story-desktop-panels .prev-container > .i-amphtml-story-page-sentinel {
-  transform: scale(0.9) translate(calc(var(--i-amphtml-story-page-50vw, 50%) + 64px), 0%) !important;
+  transform: perspective(1px) scale(0.9) translate(calc(var(--i-amphtml-story-page-50vw, 50%) + 64px), 0%) !important;
 }
 
 .i-amphtml-story-desktop-panels amp-story-page[i-amphtml-desktop-position="2"],
 [dir=rtl] .i-amphtml-story-desktop-panels amp-story-page[i-amphtml-desktop-position="-2"] {
-  transform: scale(0.9) translate(calc(3 * var(--i-amphtml-story-page-50vw, 50%) + 128px), 0%) !important;
+  transform: perspective(1px) scale(0.9) translate(calc(3 * var(--i-amphtml-story-page-50vw, 50%) + 128px), 0%) !important;
 }
 
 .i-amphtml-story-prev-hover > amp-story-page[i-amphtml-desktop-position="-1"] {