这是第一个屏幕截图。这被排除在任务之外。
如屏幕截图所示,用户将上传图像 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,缺少什么?