4

イメージがシリンダーまたはボトルに巻き付けられるアニメーションを作成しようとしています。

私はCSS3を使用していますが、ある程度機能します。しかし、シリンダーの下半分を持ってくる方法が見つかりません! それの上部は私が必要とするものであり、下半分は上部ビットと同じである必要があります。

私はjsFiddleを作成しましたが、3Dが表示されていないため、ページはjsFiddleのようにはなりません。ここからコードを取得し、ローカルの空白の HTML ページで試してみてください。

下半分 (下の円) を上半分とまったく同じにする必要があります。

X/Y 値をいじってみましたが、何もうまくいかないようです!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description"    content="wrap an image around a 3D revolving cylinder using only HTML and CSS3 3D, tutorial" />
<meta name="keywords"       content="panorama how to wrap image around cylinder CSS3 3D tutorial wrapping a picture around a cylinder  " />
<meta name="copyright"      content="(c) 2011 - 2012" /> 
<meta name="author"     content="Preston E Hall, director@baloziproductions.com" />

<title>Image Wrapped Around Spinning Cylinder Using Pure CSS3 3D</title>

<style type="text/css" media="screen">

body    {background:#000;
    color:rgb(236,132,57)}

h1  {font:small-caps 167% Arial,Helvetica,sans-serif}

#container {
    text-align:center;
    margin:0 auto;
    top:450px;
    width:550px;
    -moz-perspective: 900px;      
    -webkit-perspective: 900}

#container:hover * {
    -moz-animation-play-state:paused;
    -webkit-animation-play-state:paused}

#frame {width: 33px;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;  /* translate must be last */
    -moz-transform: rotateX(10deg) rotateY(0deg) rotateZ(0deg) translate3d(125px,70px,50px);
    -webkit-transform: rotateX(10deg) rotateY(0deg) rotateZ(0deg) translate3d(125px,70px,50px);}

.strip {-moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-animation: spin 15s infinite linear;
    -webkit-animation: spin 15s infinite linear}

.strip div {
    position: absolute;
    background:  url(http://thumbp2-ir2.thumb.mail.yahoo.com/tn?sid=24769798665600007&mid=AKoo5C4AABDQUg0%2FRwAAAHNDk2E&midoffset=2_0_0_1_7182251&partid=1.2&f=1726&fid=Inbox&w=614&h=503);  /* background image is 792px 320px, try with green-hills or thailand-sunrise.jpg */
    background-repeat:no-repeat;
    border: solid rgb(145,87,0);
    border-width: thin 10px;
    height:320px;
    width:33px;
    opacity: 100;
}

.strip .a {background-position: 0 0;
       -moz-transform: rotateY(0deg) translateZ(124px);
    -webkit-transform: rotateY(0deg) translateZ(124px)}

.strip .b {background-position: 759px 0;
       -moz-transform: rotateY(0deg) translateZ(124px);
    -webkit-transform: rotateY(0deg) translateZ(124px)}

.strip .c {background-position: 726px 0;
       -moz-transform: rotateY(30deg) translateZ(124px);
    -webkit-transform: rotateY(30deg) translateZ(124px)}

.strip .d {background-position: 693px 0;
       -moz-transform: rotateY(45deg) translateZ(124px);
    -webkit-transform: rotateY(45deg) translateZ(124px)}    

.strip .e {background-position: 660px 0;
       -moz-transform: rotateY(60deg) translateZ(124px);
    -webkit-transform: rotateY(60deg) translateZ(124px)}    

.strip .f {background-position: 627px 0;
       -moz-transform: rotateY(75deg) translateZ(124px);
    -webkit-transform: rotateY(75deg) translateZ(124px)}

.strip .g {background-position: 594px 0;
       -moz-transform: rotateY(90deg) translateZ(124px);
    -webkit-transform: rotateY(90deg) translateZ(124px)}

.strip .h {background-position: 561px 0;
       -moz-transform: rotateY(105deg) translateZ(124px);
    -webkit-transform: rotateY(105deg) translateZ(124px)}   

.strip .i {background-position: 528px 0;
       -moz-transform: rotateY(120deg) translateZ(124px);
    -webkit-transform: rotateY(120deg) translateZ(124px)}   

.strip .j {background-position: 495px 0;
       -moz-transform: rotateY(135deg) translateZ(124px);
    -webkit-transform: rotateY(135deg) translateZ(124px)}

.strip .k {background-position: 462px 0;
       -moz-transform: rotateY(150deg) translateZ(124px);
    -webkit-transform: rotateY(150deg) translateZ(124px)}

.strip .l {background-position: 429px 0;
       -moz-transform: rotateY(165deg) translateZ(124px);
    -webkit-transform: rotateY(165deg) translateZ(124px)}   

.strip .m {background-position: 396px 0;
       -moz-transform: rotateY(180deg) translateZ(124px);
    -webkit-transform: rotateY(180deg) translateZ(124px)}       

.strip .n {background-position: 363px 0;
       -moz-transform: rotateY(195deg) translateZ(124px);
    -webkit-transform: rotateY(195deg) translateZ(124px)}

.strip .o {background-position: 330px 0;
       -moz-transform: rotateY(210deg) translateZ(124px);
    -webkit-transform: rotateY(210deg) translateZ(124px)}

.strip .p {background-position: 297px 0;
       -moz-transform: rotateY(225deg) translateZ(124px);
    -webkit-transform: rotateY(225deg) translateZ(124px)}   

.strip .q {background-position: 264px 0;
       -moz-transform: rotateY(240deg) translateZ(124px);
    -webkit-transform: rotateY(240deg) translateZ(124px)}   

.strip .r {background-position: 231px 0;
       -moz-transform: rotateY(255deg) translateZ(124px);
    -webkit-transform: rotateY(255deg) translateZ(124px)}

.strip .s {background-position: 198px 0;
       -moz-transform: rotateY(270deg) translateZ(124px);
    -webkit-transform: rotateY(270deg) translateZ(124px)}

.strip .t {background-position: 165px 0;
       -moz-transform: rotateY(285deg) translateZ(124px);
    -webkit-transform: rotateY(285deg) translateZ(124px)}   

.strip .u {background-position: 132px 0;
       -moz-transform: rotateY(300deg) translateZ(124px);
    -webkit-transform: rotateY(300deg) translateZ(124px)}   

.strip .v {background-position: 99px 0;
       -moz-transform: rotateY(315deg) translateZ(124px);
    -webkit-transform: rotateY(315deg) translateZ(124px)}

.strip .w {background-position: 66px 0;
       -moz-transform: rotateY(330deg) translateZ(124px);
    -webkit-transform: rotateY(330deg) translateZ(124px)}

.strip .x {background-position: 33px 0;
       -moz-transform: rotateY(345deg) translateZ(124px);
    -webkit-transform: rotateY(345deg) translateZ(124px)}

@-moz-keyframes spin {
    from { -moz-transform: rotateY(0)}
    to   { -moz-transform: rotateY(-360deg)}}

@-webkit-keyframes spin {
    from { -webkit-transform: rotateY(0)}
    to   { -webkit-transform: rotateY(-360deg)}}

</style>

</head>
<body>

<div id="container">

<h1>Image Wrapped Around A Spinning strip</h1>

<div id="frame">
<div class="strip">

<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
<div class="f"></div>
<div class="g"></div>
<div class="h"></div>
<div class="i"></div>
<div class="j"></div>
<div class="k"></div>
<div class="l"></div>
<div class="m"></div>
<div class="n"></div>
<div class="o"></div>
<div class="p"></div>
<div class="q"></div>
<div class="r"></div>
<div class="s"></div>
<div class="t"></div>
<div class="u"></div>
<div class="v"></div>
<div class="w"></div>
<div class="d"></div>

</div>
</div>
</div>
</body>
</html>

前もって感謝します。

4

2 に答える 2

1

OK @ j08691がくれたフィドルでCSSを少しいじってみました。そして私はこれを思いつきました。

http://jsfiddle.net/QGEgv/

私が実際に変更した唯一のことは、rotateX(10deg)in both-moz-transformと-webkit-transform- to0deg

#frame {width: 33px;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;  /* translate must be last */
-moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(125px,70px,50px);
-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(125px,70px,50px);}

何が起こるかというと、10 度傾けたときにより「3D」に見えるようにするために、底をユーザーの方に向けて、ユーザーに近づいているように見せます。その結果、画面の下部が大きくなりました。

于 2013-08-16T14:01:16.760 に答える
0

この問題は、次のコード行を変更することで解決されました。

#container {
    text-align:center;
    margin:0 auto;
    top:450px;
    width:550px;
    -moz-perspective: 2000px;     
    -webkit-perspective: 2000}
于 2013-08-16T14:00:57.433 に答える