Html 以特定角度、CSS3或画布旋转图像？

这是第一个屏幕截图。这项任务不包括在内

如屏幕截图所示，用户将上传图像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>

我对此很满意，因为它似乎可以在所有支持css3的浏览器上运行。 但问题是我没有得到预期的产出

最重要的是，在

最终输出的情况下，图像之间的间距更一致、更好，但在我的情况下则不同

只有css3才能实现它，还是我需要学习画布

如果只有css3，缺少什么？
您可以使用CSS透视+transform:rotateY为图像提供透视效果，而不是对图像进行切片

看看这把小提琴：它是根据这篇关于CSS技巧的文章改编的：

CSS:

您可以使用CSS perspective+transform:rotateY为图像提供透视图，而不是切片图像。看看这把小提琴吧：它是根据这篇关于CSS技巧的帖子改编的：@markE。。我认为你提供了更好的解决方案。请添加与答案相同的内容，以便我可以将其作为已解决的问题。只需在该答案上添加注释，无论我对每个元素所做的是什么，@markE将其添加到
div
列中，并执行了相同的操作。。但是帮助很大。。谢谢
#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;
}

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%);
}