3D Поворот с использованием перспективы в JQuery Слайд-шоу

Я собирался ответить на вопрос с тегом JQuery, который закрылся (вне темы). Я создал fiddle, чтобы ответить на него. Он работает так, как я этого хотел, но повернутые divs выглядят не так, как я хотел.3D Поворот с использованием перспективы в JQuery Слайд-шоу

Похоже>

enter image description here

Вместо этого>

enter image description here

Я использую perspective и rotateY для циклического сдвига эффекта я достиг до сих пор. Для этого мне просто нужна помощь в CSS.

источник

2013-12-26 Zword

я думаю тот же вопрос [CSS3-преобразования] [1] [1]: http://stackoverflow.com/questions/5293736/css3-transform-skew – CY5

Вы должны изменить transform-origin точку, попробуйте следующее:

-webkit-transform-origin: 0 0; 
-webkit-transform-origin: 100% 0;

Смотрите эту скрипку: Демонстрация http://jsfiddle.net/kzQFQ/185/

источник

2013-12-26 15:38:59 DaniP

Его решает проблему для левых divs, но не для правильного – Zword

Неверно. он решает проблему для обоих div. – VoronoiPotato

Thaks @Zword для редактирования скрипта, чтобы сделать обе работы, я не успел ответить на весь вопрос: P – DaniP

Ваши контейнеры недостаточно велики для перспективы и поворота div. Следовательно, его отрубают. (Поля необходимы также на контент-контейнера удирать их вниз)

.wrapper { 
position: relative; 
width: auto; 
margin-top:40px; 
height: 600px; 
top: 0; 
left: 0; 
overflow: hidden; 
perspective: 800px; 
-moz-perspective: 800px; 
-webkit-perspective: 800px; 
-webkit-perspective-origin: 50% 100px; 
}

http://jsfiddle.net/fgM49/

источник

2013-12-26 15:34:07 VoronoiPotato

Но мне нужны дивы в выглядите так, как я показал это в вопросе (после вместо) – Zword

, затем исправьте свое перспективное происхождение. Другой парень был совершенно прав, и вы не обратили на это никакого внимания. – VoronoiPotato

Как я сказал в комментарии ниже, что ответ решает проблему только для левого div – Zword

для левой div

-webkit-transform: perspective(100px) rotateY(30deg);

правого DIV

-webkit-transform: perspective(100px) rotateY(-30deg);

для поддержки Crossbrowser вы можете использовать http://ricostacruz.com/jquery.transit/

$('').transition({ 
    perspective: '100px', 
    rotateY: '30deg' 
});

источник

2013-12-26 15:56:27 animack

Просто добавьте ScaleY (0.94), как

-webkit-transform: rotateY(30deg) rotateY(30deg);

Вот это демо http://jsfiddle.net/kzQFQ/190/

источник

2013-12-26 16:09:22 nidzix

Ваш ответ тоже хорош. + 1 для этого. Но мне больше нравится принятая скрипка ответа. – Zword

3D Поворот с использованием перспективы в JQuery Слайд-шоу

ответ

Смежные вопросы