CSS3 Модальный фон не прозрачный

Question

Я создаю Pure CSS3 Modal.

По пути у меня возникли две проблемы.

1. Фон не меняется на прозрачный черный цвет, когда модальный щелчок. (если вы видели модальность, прежде чем вы знаете, что я имею в виду вызвать в основном это заставит фон быть прозрачным цветом типа.) Смотрите скриншоты:

!

2. Я подумал, как я могу сделать этот 3D Flip Horizontal Animate или создать приятное и плавное вращение при приближении, а не просто перемещение сверху вниз.

Вот мой HTML:

<p><a href="#modal" class="btn go">Display Modal</a></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> 

       <a href="#" class="btn">Close Modal</a> 
      <div class="overlay"></div> 
     </div> 
    </div> 

Вот мои таблицы стилей коды:

.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; 


} 

Вот мой JS FIDDLE: http://jsfiddle.net/agx4w5pm/1/

Если бы вы могли изменить свой JSFIDDLE код, который будет большая помощь.

Заранее благодарим за помощь!

Answer 1

Не понял ваш первый пункт. Но добавлен эффект вращения для вашего модального типа, как вы спросили во втором пункте. заменить следующие классы

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

Уведомление -webkit-transform: rotateX(270deg); свойство, которое дает эффект вращения.