From f42465445d328e9c896404e14c5301dcdc8e4e10 Mon Sep 17 00:00:00 2001 From: Omar Date: Wed, 18 Mar 2020 00:30:51 +1100 Subject: [PATCH] works now --- .DS_Store | Bin 0 -> 6148 bytes index.html | 17 ++++++++++++++++- script.js | 2 +- style.css | 31 +++++++++++++++++++++++-------- 4 files changed, 40 insertions(+), 10 deletions(-) create mode 100644 .DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..55b24a1fa5a3aee0fc72c0f77123790662b8fec6 GIT binary patch literal 6148 zcmeHK%Sr=55Uh?lL<5qe$N7Q1eGu=4;Q^QYA*Fat25D~bjKrp<$0BTpU^C6BR3fm<}VM?EmmUu@EEKf)Rt ztZ;)b-+x(et7W}ivR}n{rJucJV+2gO!Zj*#HrTN&xavKc9_zfvI%IBzM=~FnU*HbA zE<;`h7!95|o6b>@-(!r9dkj{?LV-{q6bJ=Efgcp$nXNXN8b%okgaV*rm6IGx$JUTNG%+gCsNzoyF*@6m=ar7Fq0u4!_z<7@ + + + + CodePen - Door opening animations with CSS + + + + +
@@ -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