Heim > Artikel > Web-Frontend > Beispiel für die Erstellung eines coolen dreidimensionalen Fotoalbums mit CSS3

Beispiel für die Erstellung eines coolen dreidimensionalen Fotoalbums mit CSS3

高洛峰Original: 2017-03-08 13:41:532610Durchsuche

Teilen Sie dieses coole 3D-Fotoalbum, ich hoffe, es gefällt Ihnen allen!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三维动画</title>
<style type="text/css">
* {   
    padding : 0px;   
    margin: 0px;   
}   
body {   
    background: url(images/758.jpg) no-repeat top center;   
}   
.product {   
    height: 400px;   
    position: fixed;   
    top: 20%;   
    right: 20%;   
    /*视距*/   
    perspective : 500px;   
}   
.scene {   
    height: 250px;   
    width: 250px;   
    transform-style: preserve-3d;   
    transform-origin: 50%;   
    margin: 100px;   
    /*定义一个名为slide的动画*/   
    animation: slide 12s linear infinite;   
}   

.scene ul li {   
    width: 230px;   
    height: 230px;   
    list-style: none;   
    border: 5px solid rgba(255, 255, 255, 0.5);   
    position: absolute;   
}   

@keyframes slide{   
    from{   
        transform: rotateY(0deg);   
    }   

    to{   
        transform: rotateY(360deg);   
    }   
}   
.s1 {   
    float: left;   
}   
.s1 ul li:nth-child(1) {   
    transform: rotateY(0deg) translateZ(118px);   
}   
.s1 ul li:nth-child(2) {   
    transform: rotateY(90deg)  translateZ(118px);   
}   
.s1 ul li:nth-child(3) {   
    transform: rotateY(180deg)  translateZ(118px);   
}   
.s1 ul li:nth-child(4) {   
    transform: rotateY(-90deg)  translateZ(118px);   
}   
.s2 {   
    float: right;   
}   
.s2 ul li:nth-child(1) {   
    transform: rotateY(0deg) translateZ(200px);   
}   
.s2 ul li:nth-child(2) {   
    transform: rotateY(90deg)  translateZ(200px);   
}   
.s2 ul li:nth-child(3) {   
    transform: rotateY(180deg)  translateZ(200px);   
}   
.s2 ul li:nth-child(4) {   
    transform: rotateY(-90deg)  translateZ(200px);   
}   
</style>
</head>
<body>
    <p class=&#39;product&#39;>
    <!-- scene类是为了修饰两个p的相同点 -->
    <!-- s1和s2是为了显示两个p的不同，一个左浮动，一个右浮动 -->
        <p class=&#39;scene s1&#39;>
            <ul>
                <li><img  src="images/1.jpg"/ alt="Beispiel für die Erstellung eines coolen dreidimensionalen Fotoalbums mit CSS3" ></li>
                <li><img  src="images/2.jpg"/ alt="Beispiel für die Erstellung eines coolen dreidimensionalen Fotoalbums mit CSS3" ></li>
                <li><img  src="images/3.jpg"/ alt="Beispiel für die Erstellung eines coolen dreidimensionalen Fotoalbums mit CSS3" ></li>
                <li><img  src="images/4.jpg"/ alt="Beispiel für die Erstellung eines coolen dreidimensionalen Fotoalbums mit CSS3" ></li>
            </ul>
        </p>
        <p class=&#39;scene s2&#39;>
            <ul>
                <li><img  src="images/1.jpg"/ alt="Beispiel für die Erstellung eines coolen dreidimensionalen Fotoalbums mit CSS3" ></li>
                <li><img  src="images/2.jpg"/ alt="Beispiel für die Erstellung eines coolen dreidimensionalen Fotoalbums mit CSS3" ></li>
                <li><img  src="images/3.jpg"/ alt="Beispiel für die Erstellung eines coolen dreidimensionalen Fotoalbums mit CSS3" ></li>
                <li><img  src="images/4.jpg"/ alt="Beispiel für die Erstellung eines coolen dreidimensionalen Fotoalbums mit CSS3" ></li>
            </ul>
        </p>
    </p>
</body>
</html>

Das Folgende ist ein Screenshot:

Beispiel für die Erstellung eines coolen dreidimensionalen Fotoalbums mit CSS3

Das obige ist der detaillierte Inhalt vonBeispiel für die Erstellung eines coolen dreidimensionalen Fotoalbums mit CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Teilen Sie Beispiele für CSS3-Rundumrandungen und RandbildeffekteNächster Artikel：Teilen Sie Beispiele für CSS3-Rundumrandungen und Randbildeffekte

In Verbindung stehende Artikel

Mehr sehen