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?

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…

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

回答1:

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

Generated code:

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

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.

来源：https://stackoverflow.com/questions/6636730/wrap-an-image-or-video-around-a-cylinder-webkit-css-3d-transform