Question

获得的图像将与其他图像一起列在列表中。我希望标题在图像旋转远离其原始位置时保持固定。一旦进入

，它就必须遵守＆＃39;过渡规则。

图像将采用列表格式的原因是因为这是我使用纯CCS来实现“翻转”的唯一方法。影响。我无法通过其他格式转换图像。

继承代码。

    <!DOCTYPE html>
<html lang="en">
<head>

<style>
ul.images {
    width:60%;
    /*background:#ccc;*/
    list-style:none;
    float:left;
    /*padding:0 0 2.5% 0;*/
    margin-top:5px;
}

ul.images li {
    width:30%;
    float:left;
    margin:2.5% 0 0 2.5%;
    position:relative;
}

ul.images li img {
    max-width:100%;
    float:left;
    border:2px solid #eee;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

.images li {
    -moz-transition:all 1s ease;
    -webkit-transition:all 1s ease;
    -o-transition:all 1s ease;
    -ms-transition:all 1s ease;
    transition:all 1s ease;
    position:relative;
}

.images li:hover {opacity:1;}

.images li:target {
    -moz-transform:scale(2) rotateY(360deg);
    -webkit-transform:scale(2) rotateY(360deg);
    -o-transform:scale(2) rotateY(360deg);
    -ms-transform:scale(2) rotateY(360deg);
    transform:scale(2) rotateY(360deg);
    z-index:2;
    opacity:1;
}

.images li:nth-of-type(even):target {
    -moz-transform:scale(2) rotateX(360deg);
    -webkit-transform:scale(2) rotateX(360deg);
    -o-transform:scale(2) rotateX(360deg);
    -ms-transform:scale(2) rotateX(360deg);
    transform:scale(2) rotateX(360deg);
}

.images li:target img {
    -moz-box-shadow:5px 3px 5px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow:5px 3px 5px rgba(0, 0, 0, 0.3);
    box-shadow:5px 3px 5px rgba(0, 0, 0, 0.3);
}

.close {
    display:none;
    font:0.3em/1em Arial, Helvetica, sans-serif;
    text-transform:uppercase;
    letter-spacing:0.3em;
    text-decoration:none;
    background:#c15252;
    padding:2px 2px;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
    color:#fff;
    position:absolute;
    top:-3px;
    right:0;
    -moz-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.2);
    box-shadow:2px 2px 3px rgba(0, 0, 0, 0.2);
}

.close:hover {background:#d06464;}

.images li:target .close {display:inline;}

figcaption{font-family:arial;padding-top:3px;font-size:96%;}

#wrapper{width:80%;margin:200px auto 0 auto;}

a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none;}
a:active {text-decoration: none;}

</style>

</head>
<body>
<div id="wrapper">

        <ul class="images">
            <li id="onea"><a class="close" href="#gal-six">Close</a><a href="#onea"><img src="http://d2o0t5hpnwv4c1.cloudfront.net/871_dryEE/dry-ee.png" alt="">
            <figcaption>Caption etc goes here...</figcaption></a>
            </li>
        </ul>

</div>



</body>
</html>

以列表格式旋转图像，标题需要固定

0 个答案: