CSS3 Modal Background Not Transparent - html

Question

I am creating a Pure CSS3 Modal.
Along the way I got two issues.
The Background is not changing to transparent black color when the modal was click.
(if you've seen modal before you know what I mean cause basically it will force the background to be transparent type color.) See Screenshots:
!The original background color is #fff or white
Look at the background its color grayish tranparent color when the the modal was active
I've been thinking how can I make this 3D Flip Horizontal Animate or create a nice and smooth rotation when coming instead of just plain moving from top to bottom.
Here's my HTML:
<p>Display Modal</p>
</div>
<div id="modal">
<div class="modal-content">
<h1>What is a modal?</h1>
<div class="copy">
<p>A modal window is any type of window that is a child (secondary window) to a parent window and usurps the parent's control. It is commonly associated with an Internet Web site pop-up window that stays in front of the original window. A user may not press any controls or enter any information on the parent window (the original window which opened the modal) until the modal has been closed.</p>
</div>
Close Modal
<div class="overlay"></div>
</div>
</div>
Here's my stylesheet codes:
.container {
width:50%;
margin:90px auto
}
#modal {
background:#97d2f1;
left:50%;
top:-50%;
width:80%;
padding: 20px;
margin:-250px 0 0 -40%;
position:absolute;
color: #fff;
visibility: hidden;
box-shadow:0 3px 7px rgba(0,0,0,.25);
transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}
#modal:target {
opacity: 1;
top:50%;
visibility: visible;
}
#modal .overlay {
background-color: #000;
background: rgba(0,0,0,.5);
height: 100%;
left: 0;
position: fixed;
top: 0;
z-index: 10;
}
.btn {
padding:0 3em;
outline:none;
border:none;
color:#fff;
text-transform:uppercase;
font-weight:700;
letter-spacing:1px;
font-size:1em;
line-height:4;
overflow:hidden;
border-radius:5px;
background:rgba(0,0,0,0.2);
text-align:center;
cursor:pointer;
margin:20px auto;
display:block;
width: 30%;
margin-top: 40px;
}
Here's my JS FIDDLE: http://jsfiddle.net/agx4w5pm/1/
If you could edit my JSFIDDLE code that would be a great help.
Thanks in advance for the help!

Answer 1

Didn't understand your first point. But added rotation effect to your modal like you asked in second point. replace following classes
#modal {
background:#97d2f1;
left:50%;
top:-50%;
width:80%;
padding: 20px;
margin:-250px 0 0 -40%;
position:absolute;
color: #fff;
top: 50%;
box-shadow:0 3px 7px rgba(0,0,0,.25);
transition: all 1s ;
-moz-transition: all 1s ;
-webkit-transition: all 1s ;
-webkit-transform: rotateX(270deg);
-webkit-transform-origin: 50% 50%;
-webkit-perspective: 1500px;
}
#modal:target {
opacity: 1;
top:50%;
-webkit-transform: rotateX(0deg);
}
Notice -webkit-transform: rotateX(270deg); property which is giving rotation effect.