@@ -7,4 +17,9 @@
-
Surprise!
\ No newline at end of file
+
Surprise!
+
+
+
+
+
diff --git a/script.js b/script.js
index 04cecfe..dd18184 100644
--- a/script.js
+++ b/script.js
@@ -12,4 +12,4 @@ $('.doorFrame').click(function(event){
// move the overlay
$('.popover').css('top', doorFrame.offset().top - 60 + "px").css('left', doorFrame.offset().left - 70 + "px").toggleClass('open');
*/
-});
+});
\ No newline at end of file
diff --git a/style.css b/style.css
index 984d7b2..22b68ce 100644
--- a/style.css
+++ b/style.css
@@ -3,7 +3,8 @@ body {
}
.container {
background-color: black;
- perspective: 5000px;
+ -webkit-perspective: 5000px;
+ perspective: 5000px;
margin: 110px;
display: block;
margin-left: auto;
@@ -44,9 +45,14 @@ body {
.swing {
cursor:pointer;
box-shadow: 0 0 0 0 rgba(0,0,0,0);
- transform-style: preserve-3d;
+ -webkit-transform-style: preserve-3d;
+ transform-style: preserve-3d;
+ -webkit-transition: box-shadow .5s, -webkit-transform .5s;
+ transition: box-shadow .5s, -webkit-transform .5s;
transition: transform .5s, box-shadow .5s;
- transform-origin: right center;
+ transition: transform .5s, box-shadow .5s, -webkit-transform .5s;
+ -webkit-transform-origin: right center;
+ transform-origin: right center;
}
.swing figure {
@@ -55,7 +61,8 @@ body {
position: absolute;
width: 100%;
height: 100%;
- backface-visibility: hidden;
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden;
}
.door .front {
@@ -71,7 +78,8 @@ body {
}
.swing .back {
- transform: rotateY( 180deg);
+ -webkit-transform: rotateY( 180deg);
+ transform: rotateY( 180deg);
}
.swing:hover {
@@ -79,7 +87,8 @@ body {
}
.swing.flipped {
- transform: rotateY( 120deg);
+ -webkit-transform: rotateY( 120deg);
+ transform: rotateY( 120deg);
box-shadow: 0 0 15px 1px rgba(0,0,0,.75);
}
@@ -89,11 +98,17 @@ body {
width:200px;
height:200px;
background-color:#fff;
+ -webkit-transition: -webkit-transform .5s;
+ transition: -webkit-transform .5s;
transition: transform .5s;
+ transition: transform .5s, -webkit-transform .5s;
+ -webkit-transition: box-shadow .5s;
transition: box-shadow .5s;
- transform:scale3d(0,0,0);
+ -webkit-transform:scale3d(0,0,0);
+ transform:scale3d(0,0,0);
}
.popover.open {
- transform:scale3d(1,1,1);
+ -webkit-transform:scale3d(1,1,1);
+ transform:scale3d(1,1,1);
}
\ No newline at end of file