CSS3 "Кривая поверхность" 3D Transform / Perspective Help

Question

Я пытаюсь создать своего рода перспективную толпу для моего сайта. Это буквально улье, полное плоских изображений, и я хочу создать «изогнутую» атмосферу скученной толпы. Где он внутрь и заметно меньше внутрь и изгибается к концам.

Пример круга плаката - самый близкий, который я могу найти http://www.webkit.org/blog-files/3d-transforms/poster-circle.html, за исключением того, что мне не нужен "фронт" - только задняя часть. Каждое изображение размером 100px x 100px, 23 изображения в строке и четыре строки.

Я почти полностью потерял понимание того, как к этому подойти ... Я пробовал несколько разных способов применения уникального -webkit-transform: rotateY (x) translateZ (x) к каждому изображению, но никогда не совсем добиваться успеха (пытаясь вычислить правильные значения или полностью использовать неправильную вещь), а также играть с перспективой.

Answer 1

Это простая "стена для постеров" с 9 элементами div - все элементы div абсолютно расположены внутри оболочки.

В div оболочки добавьте: -webkit-transform-style: preserve-3d; Это то, что на самом деле создает 3D-эффект. При желании вы можете добавить настройку перспективы в зависимости от желаемой степени ракурса.

А в CSS вы создаете стиль div, который выглядит следующим образом для изображений левой руки:

-webkit-transform: rotateX(0deg) rotateY(30deg) rotateZ(0deg);
-webkit-transform-origin: 100% 0%;

и для правосторонних изображений:

-webkit-transform: rotateX(0deg) rotateY(-30deg) rotateZ(0deg);
-webkit-transform-origin: 0% 0%;

ПРИМЕЧАНИЕ: только Safari и iOS поддерживают preserve-3D прямо сейчас. Для других браузеров вам придется вручную добавлять перспективу, вручную масштабируя и искажая изображения, и это никогда не будет выглядеть точно правильно.

2014 Обновление: preserve-3D теперь широко поддерживается в браузерах

Answer 2

Только что нашел это после создания следующего, который может вам помочь: http://jsfiddle.net/remybach/hpsJV/2/

Мясо этого лежит в этом:

&:nth-of-type(3n+1) { /* col 1 */
    transform:rotateY(20deg) translateZ(-30px);
}
&:nth-of-type(3n+2) { /* col 2 */
    transform:translateZ(-90px);
}
&:nth-of-type(3n+3) { /* col 3 */
    transform:rotateY(-20deg) translateZ(-30px);
}

Answer 3

Я тоже немного подправил свою версию здесь:

http://jsfiddle.net/sJCAh/

Не совсем то, что демонстрирует красочная картинка

: -)

Answer 4

Я знаю, что это не совсем то, что вы хотите, но просто бросили это вместе и хотите посмотреть, в общем ли направлении:

http://jsfiddle.net/cwolves/mwxNK/2/