html - 特定の角度、CSS3またはキャンバスで画像を回転させますか?

Question

これが最初のスクリーンショットです。これは割り当てから除外されました。

私が達成したいこと

スクリーンショットが示すように、ユーザーは画像 1 をアップロードします。画像 2 のようになります。最終的な出力は次のようになります。

CSS3を使って同じことをやろうとしました。ここに私が長い間達成したものがあります

私が達成したこと

私はCSS3で同じことを達成しようとしています。

これが私が試したHTMLです

<div id="gallery">
        <a class="a row1" href="./example/9_b.jpg" title="Lorem ipsum dolor sit amet"><img alt="" src="./example/9_s.jpg" /></a>
        <a class="b row1" href="./example/10_b.jpg" title=""><img alt="" src="./example/10_s.jpg" /></a>
        <a class="c row1" href="./example/11_b.jpg" title=""><img alt="" src="./example/11_s.jpg" /></a>
        <a class="d row1" href="./example/12_b.jpg" title=""><img class="last" alt="" src="./example/12_s.jpg" /></a>
        <a class="e row1" href="./example/9_b.jpg" title="Lorem ipsum dolor sit amet"><img alt="" src="./example/9_s.jpg" /></a>
        <a class="f row1" href="./example/10_b.jpg" title=""><img alt="" src="./example/10_s.jpg" /></a>
        <a class="g row1" href="./example/11_b.jpg" title=""><img alt="" src="./example/11_s.jpg" /></a>


        <a class="a row2" href="./example/9_b.jpg" title="Lorem ipsum dolor sit amet"><img alt="" src="./example/9_s.jpg" /></a>
        <a class="b row2" href="./example/10_b.jpg" title=""><img alt="" src="./example/10_s.jpg" /></a>
        <a class="c row2" href="./example/11_b.jpg" title=""><img alt="" src="./example/11_s.jpg" /></a>
        <a class="d row2" href="./example/12_b.jpg" title=""><img class="last" alt="" src="./example/12_s.jpg" /></a>
        <a class="e row2" href="./example/9_b.jpg" title="Lorem ipsum dolor sit amet"><img alt="" src="./example/9_s.jpg" /></a>
        <a class="f row2" href="./example/10_b.jpg" title=""><img alt="" src="./example/10_s.jpg" /></a>
        <a class="g row2" href="./example/11_b.jpg" title=""><img alt="" src="./example/11_s.jpg" /></a>

        <a class="a row3" href="./example/9_b.jpg" title="Lorem ipsum dolor sit amet"><img alt="" src="./example/9_s.jpg" /></a>
        <a class="b row3" href="./example/10_b.jpg" title=""><img alt="" src="./example/10_s.jpg" /></a>
        <a class="c row3" href="./example/11_b.jpg" title=""><img alt="" src="./example/11_s.jpg" /></a>
        <a class="d row3" href="./example/12_b.jpg" title=""><img class="last" alt="" src="./example/12_s.jpg" /></a>
        <a class="e row3" href="./example/9_b.jpg" title="Lorem ipsum dolor sit amet"><img alt="" src="./example/9_s.jpg" /></a>
        <a class="f row3" href="./example/10_b.jpg" title=""><img alt="" src="./example/10_s.jpg" /></a>
        <a class="g row3" href="./example/11_b.jpg" title=""><img alt="" src="./example/11_s.jpg" /></a>

        <div class="caption">
            this is test caption
        </div>
        <div class="close">
            X
        </div>

        <div class="next">></div>
        <div class="prev"><</div>
    </div>

そして、これがそのCSSです

#gallery {
    width: 600px;
    height: 450px;
    background-position: center;
    background-color: #999;
    background-repeat: no-repeat;
    position: absolute;
}

.galleryed {
    z-index: 100;
}

.galleryed a {
    display: none;
}

.caption {
    background: none repeat scroll 0 0 #333;
    bottom: 0;
    color: #FFFFFF;
    display: block;
    padding: 2%;
    position: absolute;
    width: 96%;
    display: none;
    opacity: 0.3;
}

.caption:hover {
    opacity: 1;
}

.close {
    background: none repeat scroll 0 0 #333;
    top: 0;
    right: 0;
    color: #FFFFFF;
    display: block;
    padding: 2%;
    position: absolute;
    display: none;
    opacity: 0.3;
}

.next:hover,.prev:hover,.close:hover {
    opacity: 1;
    cursor: pointer;
}

.next {
    background: none repeat scroll 0 0 #333;
    top: 200px;
    right: 0;
    color: #FFFFFF;
    display: block;
    padding: 2%;
    position: absolute;
    display: none;
    opacity: 0.3;
}

.prev {
    background: none repeat scroll 0 0 #333;
    top: 200px;
    left: 0;
    color: #FFFFFF;
    display: block;
    padding: 2%;
    position: absolute;
    display: none;
    opacity: 0.3;
}

.locked,.locked:hover {
    background: none repeat scroll 0 0 #666 !important;
    opacity: 0.3;
}

#gallery a {
    perspective: 100px;
    -webkit-perspective: 100px;
    -moz-perspective: 100px;
    -ms-perspective: 100px;
    float: left;
}

#gallery img {
    margin-bottom: -15px;
    margin-top: 30px;
}

#gallery .a img {
    transform: rotateY(15deg);
    -webkit-transform: rotateY(15deg);
    -moz-transform: rotateY(15deg);
    -ms-transform: rotateY(15deg);
}

#gallery .g img {
    transform: rotateY(-15deg);
    -webkit-transform: rotateY(-15deg);
    -moz-transform: rotateY(-15deg);
    -ms-transform: rotateY(-15deg);
}

#gallery .b {
    padding-left: 10px;
}

#gallery .f {
    padding-right: 10px;
}

#gallery .b img {
    transform: rotateY(12deg);
    transform-origin: -100% 0% 0;
    -webkit-transform: rotateY(12deg);
    -webkit-transform-origin: -100% 0% 0;
    -moz-transform: rotateY(12deg);
    -moz-transform-origin: -100% 0% 0;
    -ms-transform: rotateY(12deg);
    -ms-transform-origin: -100% 0% 0;
}

#gallery .f img {
    transform: rotateY(-12deg);
    transform-origin: 200% 0% 0;
    -webkit-transform: rotateY(-12deg);
    -webkit-transform-origin: 200% 0% 0;
    -moz-transform: rotateY(-12deg);
    -moz-transform-origin: 200% 0% 0;
    -ms-transform: rotateY(-12deg);
    -ms-transform-origin: 200% 0% 0;
}

#gallery .c img {
    transform: rotateY(9deg);
    transform-origin: -350% 0% 0;
    -webkit-transform: rotateY(9deg);
    -webkit-transform-origin: -350% 0% 0;
    -moz-transform: rotateY(9deg);
    -moz-transform-origin: -350% 0% 0;
    -ms-transform: rotateY(9deg);
    -ms-transform-origin: -350% 0% 0;
}

#gallery .e img {
    transform: rotateY(-9deg);
    transform-origin: 450% 0% 0;
    -webkit-transform: rotateY(-9deg);
    -webkit-transform-origin: 450% 0% 0;
    -moz-transform: rotateY(-9deg);
    -moz-transform-origin: 450% 0% 0;
    -ms-transform: rotateY(-9deg);
    -ms-transform-origin: 450% 0% 0;
}

#gallery .d img {
    transform: rotateY(1deg);
    transform-origin: -5000% 0 0;
    -webkit-transform: rotateY(1deg);
    -webkit-transform-origin: -5000% 0 0;
    -moz-transform: rotateY(1deg);
    -moz-transform-origin: -5000% 0 0;
    -ms-transform: rotateY(1deg);
    -ms-transform-origin: -5000% 0 0;
}

css3 をサポートするすべてのブラウザーで動作しているように見えるので、これに満足しています。しかし、要点は、期待どおりに望ましい出力が得られないことです。

最も重要なことは、画像間の間隔がより一貫しており final output、私の場合は同じではありません。

css3だけで達成できますか、それともキャンバスを学ぶ必要がありますか?

css3のみの場合、何が欠けていますか?

score 2 · Accepted Answer

画像をスライスする代わりに、CSS パースペクティブ + transform:rotateY を使用して、画像にパースペクティブを与えることができます。

このフィドルをチェックしてください: http://jsfiddle.net/m1erickson/RmeeG/は、CSS-Tricks に関するこの投稿から改作されました: http://css-tricks.com/almanac/properties/p/perspective

CSS:

body {
    background-color: ivory;
}
* {
    box-sizing: border-box;
}
body {
    font-size: 16px;
}
.wrapper {
    perspective: 1000px;
    margin: 4em auto;
    width: 37em;
}
.inner {
    width:150px;
    transition: .3s;
    transform: rotateY(35deg);
}
.inner figure {
    box-shadow: -6px 6px 2px -3px rgba(100, 100, 100, .1);
    width: 11em;
    padding: 1em;
    display: inline-block;
    margin-right: 1em;
    background: rgba(250, 200, 200, 0.1);
    border: 1px solid rgba(250, 200, 200, .5);
}
.inner figcaption {
    text-align: center;
    margin: .5em 0;
    font-family:'Source Sans Pro', sans-serif;
    font-weight: bold;
    color: darken(tomato, 15%);
}
.inner img {
    display: block;
    height: auto;
    max-width: 100%;
    margin: 0 auto;
    -webkit-filter: sepia(75%);
}

html - 特定の角度、CSS3またはキャンバスで画像を回転させますか?

1 に答える 1

Related

Reference