ObjectOne > CSS > Эффект перспективы
Эффект перспективы
Эффект может оказаться неожиданным, например блок может резко скакнуть в перспективу. В браузере firefox ведёт себя более стабильно чем в chrome.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<style> .persp { transform: perspective(1168px) rotateY( -32deg ); transition: 0.6s; } .container{ background: green; width: 400px; height: 400px; position: relative; top: 100px; transition: 0.6s; cursor: pointer; } .toggle{ background: #8e8e8e; margin: 0 auto; width: 800px; height: 800px; } </style> <div class="toggle"> <div class="container"> <p>Эффект может оказаться неожиданным, например блок может резко скакнуть в перспективу. В браузере firefox ведёт себя более стабильно чем в chrome.</p> </div> </div> <script> jQuery(document).ready(function($) { // $('.toggle').hover( // function(){ $(".container").addClass('persp') }, // function(){ $(".container").removeClass('persp') } // ); $('.container').hover( function(){ $(this).addClass('persp') }, function(){ $(this).removeClass('persp') } ); }); </script> |
Количество просмотров: 1 741
| Категория: CSS, JavaScript
