Здравствуйте, в htmlbook.ru написано что нельзя сделать вот так ,с помощью matrix.
Но как же это тогда вообще возможно сделать?
Я видел такое не раз!
Вот например: сайт ,при наведении на левую полосу мы увидим эту анимацию.
Как это возможно подскажите пожалуйста.
0
-
Это можно сделать по средствам jquery. Я только что заглянул в исходники странички, так там за это отвечает отдельный скрипт с прописанной в нём анимацией. в css чистом сделать подобное на самом деле нельзя. – Вовка Федосов 9 авг '14 в 8:52
-
Хорошо пусть это будет с помощью jQuery, всё равно какой анимацией я смогу это сделать? Я долго думал над этим ,нечего придумать не смог. – Mr_Epic 9 авг '14 в 8:56
-
codepen.io/anon/pen/BjHkC – soledar10 9 авг '14 в 8:56
2 ответа
2
Вот, держите: клик.
HTML
<div id="wrap">
<div id="view" class="tacb">Ваш текст, сэр!</div>
</div>
CSS
#view {
-webkit-transform: rotateY(-25deg);
-moz-transform: rotateY(-25deg);
-ms-transform: rotateY(-25deg);
transform: rotateY(-25deg);
height: 100px;
background: url(http://akuma.su/bundles/ablog/i/bg.png) repeat;
padding: 15px;
}
#wrap {
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-ms-perspective: 1000px;
perspective: 1000px;
-webkit-perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
height: 100px;
position: relative;
}
Обратите внимание на свойство perspective.
1
Ответ выше работать не будет, как и сказали, из-за того, что на чистом CSS повторить эффект сайта не получится.
$('#menu-handler').on('mouseenter', function() {
$body.addClass('menu-visible');
});
$('#view').on('mouseenter', function() {
$body.removeClass('menu-visible');
});
$('#view').on('mouseenter', function() {
$body.removeClass('menu-visible');
});
Я и есть владелец указанного сайта. Помимо указанных выше стилей используется такой вот скрипт.