Browse files

Add webkit prefixes to moz-element-flipper CSS.

This is more in hope than anything. It could be a good test case if
WebKit gets `element`.
  • Loading branch information...
1 parent 7fb433f commit 4e156bd3cd22718eb18d3b57a29e38eae3cb1df3 @joseph joseph committed Feb 1, 2012
Showing with 16 additions and 0 deletions.
  1. +16 −0 test/experimental/moz-element-flipper/styles.css
View
16 test/experimental/moz-element-flipper/styles.css
@@ -5,13 +5,16 @@ hr.softBreak {
section {
position: relative;
background: -moz-linear-gradient(0deg, #FFF, #555, #FFF, #555, #FFF);
+ background: -webkit-linear-gradient(0deg, #FFF, #555, #FFF, #555, #FFF);
width: 320px;
height: 380px;
}
.columns {
width: 2700px;
-moz-column-width: 300px;
+ -webkit-column-width: 300px;
-moz-column-gap: 20px;
+ -webkit-column-gap: 20px;
height: 380px;
}
.colCntr {
@@ -22,13 +25,15 @@ section {
.imposter {
background-color: white;
background-image: -moz-element(#origin);
+ background-image: -webkit-element(#origin);
background-repeat: no-repeat;
position: absolute;
width: 160px;
height: 380px;
top: 0;
left: 0;
-moz-backface-visibility: hidden;
+ -webkit-backface-visibility: hidden;
background-color: #FFF;
}
#imp1 {
@@ -37,14 +42,17 @@ section {
}
#imp3 {
-moz-transform: rotateY(180deg) translateZ(1px);
+ -webkit-transform: rotateY(180deg) translateZ(1px);
}
#imp4 {
left: 160px;
}
#gate {
position: absolute;
-moz-transform-origin: 0% 50%;
+ -webkit-transform-origin: 0% 50%;
-moz-transform-style: preserve-3d;
+ -webkit-transform-style: preserve-3d;
z-index: 1;
top: 0px;
left: 160px;
@@ -55,7 +63,9 @@ section {
.pageTurn #gate{
-moz-transition: -moz-transform linear 600ms;
+ -webkit-transition: -webkit-transform linear 600ms;
-moz-transform: perspective(500px) rotateY(-180deg);
+ -webkit-transform: perspective(500px) rotateY(-180deg);
}
@@ -65,22 +75,26 @@ section {
.forwardTurn .pageTurn #imp1 {
-moz-transition: opacity linear 300ms 300ms;
+ -webkit-transition: opacity linear 300ms 300ms;
opacity: 0.25;
}
.forwardTurn .pageTurn #imp4 {
-moz-transition: opacity linear 300ms;
+ -webkit-transition: opacity linear 300ms;
opacity: 1;
}
.reverseTurn #gate {
-moz-transform-origin: 100% 50%;
+ -webkit-transform-origin: 100% 50%;
left: 0;
}
.reverseTurn .pageTurn #gate {
-moz-transform: perspective(500px) rotateY(180deg);
+ -webkit-transform: perspective(500px) rotateY(180deg);
}
.reverseTurn #imp1 {
@@ -93,10 +107,12 @@ section {
.reverseTurn .pageTurn #imp1 {
-moz-transition: opacity linear 300ms;
+ -webkit-transition: opacity linear 300ms;
opacity: 1;
}
.reverseTurn .pageTurn #imp4 {
-moz-transition: opacity linear 300ms 300ms;
+ -webkit-transition: opacity linear 300ms 300ms;
opacity: 0.25;
}

0 comments on commit 4e156bd

Please sign in to comment.