在圆柱体上包裹图像（或视频！？）-Webkit CSS 3d Transform [英] Wrap an Image (or Video!?) around a Cylinder - Webkit CSS 3d Transform

问题描述

目标：
将全景图像/视频包在圆柱周围，并控制内部的摄像机以查看全景相片。

Goal: Wrap a panoramic Image/Video around a Cylinder and control a "camera" on the inside to look around a pano.

第一件事是首先，我找不到环绕圆柱体的图像示例，更不用说视频了。有人知道怎么做吗？

First thing's first, I cannot find any example of an image, let alone a video, wrapped around a cylinder. Anyone know how to do this?

我想我可以用鼠标或箭头键控制视口的交互方式很好，但是我不知道如何从这个圆柱体的东西开始，因为我有点喜欢CSS转换和3d Webkit编码…

I think I should be fine with the interactive aspects of controlling the viewport with the mouse or arrow keys, but I have no clue how to begin with this cylinder stuff, as I'm kinda a noob with CSS transformations and 3d webkit coding…

爱你很久了-非常感谢您提供任何答案！
-Joel

Love you long time - thank you so much for any answers! -Joel

推荐答案

我今天做的完全一样。我今天早上遇到了这个问题，所以想发表一点帮助。

I just did this exact same thing today. I came across this question this morning, so wanted to post a bit of help.

生成的代码：

<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>

外部div是圆柱体本身。 3个 view-Cylinder-Item div是该圆柱上的面。这个特定的示例被分为50个面（为简洁起见而被切割），因此每个面都旋转了 7.2度。面的 translateZ 是通过基本几何形状计算的（毕达哥拉斯： sqrt（radius ^ 2-face_width ^ 2）。半径计算为 imageWidth / Pi / 2 ，并用于包装div的 translateZ （ 1222 ...像素）。每个面也被 -50％（左：-77px ）放置在正确的位置。

the outer divs are the cylinder itself. The 3 "view-Cylinder-Item" divs are faces on that cylinder. This particular example is split into 50 faces (cut for brevity sake), so each face is rotated by 7.2 degrees. The translateZ of the faces is calculated by basic geometry (pythagoras: sqrt( radius^2 - face_width^2 ). Radius is calculated as imageWidth / Pi / 2 and is used in the translateZ of the wrapping div (1222... pixels). Each face is also offset by -50% (left: -77px) to place it in the correct location.

希望这会有所帮助，我知道这是存在几个月的问题了。

Hope this helps a bit, I know this is question is a few months old.

这篇关于在圆柱体上包裹图像（或视频！？）-Webkit CSS 3d Transform的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！