Maison >interface Web >tutoriel CSS >Exemple de création d'un superbe album photo en trois dimensions avec CSS3

Exemple de création d'un superbe album photo en trois dimensions avec CSS3

高洛峰original: 2017-03-08 13:41:532714parcourir

Partagez ce superbe album photo 3D, j'espère qu'il vous plaira tous !

<!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="Exemple de création d'un superbe album photo en trois dimensions avec CSS3" ></li>
                <li><img  src="images/2.jpg"/ alt="Exemple de création d'un superbe album photo en trois dimensions avec CSS3" ></li>
                <li><img  src="images/3.jpg"/ alt="Exemple de création d'un superbe album photo en trois dimensions avec CSS3" ></li>
                <li><img  src="images/4.jpg"/ alt="Exemple de création d'un superbe album photo en trois dimensions avec CSS3" ></li>
            </ul>
        </p>
        <p class=&#39;scene s2&#39;>
            <ul>
                <li><img  src="images/1.jpg"/ alt="Exemple de création d'un superbe album photo en trois dimensions avec CSS3" ></li>
                <li><img  src="images/2.jpg"/ alt="Exemple de création d'un superbe album photo en trois dimensions avec CSS3" ></li>
                <li><img  src="images/3.jpg"/ alt="Exemple de création d'un superbe album photo en trois dimensions avec CSS3" ></li>
                <li><img  src="images/4.jpg"/ alt="Exemple de création d'un superbe album photo en trois dimensions avec CSS3" ></li>
            </ul>
        </p>
    </p>
</body>
</html>

Ce qui suit est une capture d'écran :

Exemple de création dun superbe album photo en trois dimensions avec CSS3

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Partage d'exemples d'effets d'image de bordure et de bordure arrondie CSS3Article suivant：Partage d'exemples d'effets d'image de bordure et de bordure arrondie CSS3

Articles Liés

Voir plus