Оберните изображение (или видео !?) вокруг цилиндра - 3D-преобразование Webkit CSS - PullRequest
Новая
       15

Оберните изображение (или видео !?) вокруг цилиндра - 3D-преобразование Webkit CSS

2 голосов
/ 09 июля 2011

Цель: обернуть панорамное изображение / видео вокруг цилиндра и управлять «камерой» изнутри, чтобы осмотреть панораму.

Во-первых, я не могу найти ни одного примера изображения, не говоря уже овидео, обернутое вокруг цилиндра.Кто-нибудь знает, как это сделать?

Я думаю, что я должен быть в порядке с интерактивными аспектами управления окном просмотра с помощью мыши или клавиш со стрелками, но я понятия не имею, как начать с этого материала цилиндра, так как я 'Я - нуб с CSS-трансформациями и 3d-кодированием веб-наборов ...

Люблю тебя долгое время - большое спасибо за любые ответы!-Joel

1 Ответ

1 голос
/ 06 ноября 2011

Я только что сделал то же самое сегодня.Я столкнулся с этим вопросом сегодня утром, поэтому хотел опубликовать небольшую справку.

Сгенерированный код: 

<div class="view-Cylinder-Background" style="width: 100%; height: 100%; position: absolute; left: 0px; right: 0px; -webkit-perspective-origin-x: 50%; -webkit-perspective-origin-y: 50%; -webkit-perspective: 500; ">
    <div style="width: 100%; height: 100%; -webkit-transform-style: preserve-3d; -webkit-transform: translateZ(1222.3099629457563px); ">
        <div style="-webkit-transform-style: preserve-3d; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; width: 0px; -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 0.5s; -webkit-transform: rotateY(-748.5000000000005deg); ">
            <div class="view-Cylinder-Item" style="position: absolute; left: -77px; -webkit-transform: rotateY(0deg) translateZ(1195.5154099609108px) translateY(0px); -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 0.5s; ">
                <div style="-webkit-transform: rotateY(180deg); ">
                    <div style="background-image: url(images/panarama.jpg); width: 153px; height: 1024px; background-position: 0px 0px; ">
                    </div>
                </div>
            </div>
            <div class="view-Cylinder-Item" style="position: absolute; left: -77px; -webkit-transform: rotateY(7.2deg) translateZ(1195.5154099609108px) translateY(0px); -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 0.5s; ">
                <div style="-webkit-transform: rotateY(180deg); ">
                    <div style="background-image: url(images/panarama.jpg); width: 153px; height: 1024px; background-position: 153.6px 0px; ">
                    </div>
                </div>
            </div>
            <div class="view-Cylinder-Item" style="position: absolute; left: -77px; -webkit-transform: rotateY(14.4deg) translateZ(1195.5154099609108px) translateY(0px); -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 0.5s; ">
                <div style="-webkit-transform: rotateY(180deg); ">
                    <div style="background-image: url(images/panarama.jpg); width: 153px; height: 1024px; background-position: 307.2px 0px; ">
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

внешние элементы - это сам цилиндр.3 элемента "view-Cylinder-Item" - это грани этого цилиндра.Этот конкретный пример разбит на 50 граней (вырезано для краткости), поэтому каждая грань поворачивается на 7.2 degrees.translateZ граней рассчитывается по базовой геометрии (Пифагор: sqrt( radius^2 - face_width^2 ). Радиус вычисляется как imageWidth / Pi / 2 и используется в translateZ в div обтекания (1222... pixels). Каждая грань также смещается на-50% (left: -77px), чтобы разместить его в правильном месте.

Надеюсь, это немного поможет, я знаю, что этому вопросу несколько месяцев.

...