maverick/Keep-Sydney-Open-Door-Animation-Css
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

works now

Browse source
This commit is contained in:
Omar 2020-03-18 00:30:51 +11:00
parent 1880b6e9b9
commit f42465445d
4 changed files with 40 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
.DS_Store vendored Normal file
View file

Binary file not shown.

17
index.html
View file

@ -1,3 +1,13 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Door opening animations with CSS</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<section class="container group">
<div class="doorFrame" id="c0">
<div class="door swing">
@ -7,4 +17,9 @@
</div>
</section>
<div class="popover">Surprise!</div>
<div class="popover">Surprise!</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src="./script.js"></script>
</body>
</html>

2
script.js
View file

@ -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');
*/
});
});

31
style.css
View file

@ -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);
}