html - 以特定角度旋转图像，CSS3 还是 Canvas？

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才能实现还是我需要为此学习Canvas？

如果只有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 还是 Canvas？

1 回答 1

Related

Reference