carrousel CSS3-tutoriel CSS-php.cn

carrousel CSS3

php中世界最好的语言

Libérer： 2018-03-21 16:50:01

original

2375 Les gens l'ont consulté

Cette fois, je vous apporte le carrousel css3. Quelles sont les précautions pour implémenter le carrousel css3. Voici les cas réels, jetons un coup d'œil.

1. perspective

L'attribut perspective comprend deux attributs : aucun et la valeur de longueur avec unité.

La valeur par défaut de l'attribut perspective est aucune, ce qui signifie que l'objet 3D est vu sous des angles infinis, mais il semble plat. Une autre valeur, , accepte une valeur dont les unités de longueur sont supérieures à 0. Et son unité ne peut pas être une valeur en pourcentage. Plus la valeur est grande, plus l'angle apparaît loin, créant une intensité plutôt faible et très peu de changement dans l'espace 3D. A l’inverse, plus cette valeur est petite, plus l’angle apparaît proche, créant un angle fort et une grande variation 3D. Pour faire simple : lorsque la perspective définit la longueur, plus celle-ci est petite, plus l'effet 3D est évident et plus vos yeux sont proches de l'objet 3D, et vice versa.

2. transform : translateZ(length)

En supposant que la perspective : 300 px est définie, plus la valeur de translationZ est petite, plus la taille du sous-titre est petite. -element le sera. Lorsque la valeur est définie Lorsqu'il est proche de 300px, il semble que l'élément soit devant vous. Lorsqu'il dépasse 300px, il atteint l'arrière de votre champ de vision et l'élément est invisible.

Le cœur de l'exemple ci-dessus :

1. Tout d'abord, tous les conteneurs d'images ont position:absolute, superposez-les ensemble, puis définissez rotateY sur 40*i respectivement, i= 0, 1, 2 ...9 ; Toutes les images se croiseront en une forme en forme de fleur

2. Ensuite, définissez TranslateZ pour le conteneur de chaque image, et toutes les images se déplaceront vers l'extérieur à partir de l'angle correspondant et se développeront en un grand cercle, c'est l'effet de l'image ci-dessus.

html :

<!DOCTYPE html>  
<html>  
<head>  
    <title></title>  
    <meta charset="utf-8"/>  
   <link href="css/reset.css" rel="stylesheet" type="text/css"/>  
    <script type="text/javascript" src="../../jquery-1.8.3.js"></script>  
  
    <script type="text/javascript">  
        // alert( 64 / Math.tan(20 / 180 * Math.PI));  
        var transform = function (element, value, key)  
        {  
            key = key || "Transform";  
            ["Moz", "O", "Ms", "Webkit", ""].forEach(function (prefix)  
            {  
                element.style[prefix + key] = value;  
            });  
  
            return element;  
        }  
  
  
        $(function ()  
        {  
            var deg = -40 , i = 1;  
            $("#container").click(function ()  
            {  
                transform($(this)[0], "rotateY(" + (deg * i++) + "deg)")  
            });  
        });  
  
    </script>  
  
     
  
</head>  
<body>  
<p id="stage">  
    <ul id="container">  
        <li>  
            <img src="img/1.jpg"/>  
            <span>Do one thing at a time, and do well..</span>  
        </li>  
        <li>  
            <img src="img/2.jpg"/> <span>Do one thing at a time, and do well..</span>  
        </li>  
        <li>  
            <img src="img/3.jpg"/> <span>Keep on going never give up.</span>  
        </li>  
        <li>  
            <img src="img/4.jpg"/> <span>Whatever is worth doing is worth doing well.</span>  
        </li>  
        <li>  
            <img src="img/5.jpg"/> <span>Believe in yourself.</span>  
        </li>  
        <li>  
            <img src="img/6.jpg"/> <span>Action speak louder than words.</span>  
        </li>  
        <li>  
            <img src="img/7.jpg"/> <span>Never put off what you can do today until tomorrow.</span>  
        </li>  
        <li>  
            <img src="img/8.jpg"/> <span>Jack of all trades and master of none.</span>  
        </li>  
        <li>  
            <img src="img/9.jpg"/> <span>Judge not from appearances.</span>  
        </li>  
    </ul>  
</p>  
</body>  
</html>

Copier après la connexion

CSS :

li  
{  
    width: 128px;  
    box-shadow: 0 1px 3px rgba(0, 0, 0, .5);  
    position: absolute;  
    bottom: 0;  
}  
  
li img  
{  
    width: 128px;  
    box-shadow: 0 1px 3px rgba(0, 0, 0, .5);  
    vertical-align: middle;  
}  
  
li span  
{  
    display: block;  
    width: 128px;  
    text-align: center;  
    color: #333;  
    font-size: 8px;  
}  
  
#stage  
{  
  
    width: 900px;  
    min-height: 100px;  
    margin-left: auto;  
    margin-right: auto;  
    padding: 100px 50px;  
    -webkit-perspective: 1200px;  
    position: relative;  
}  
  
#container  
{  
    background: url("img/xawl.jpg") no-repeat 0 0;  
    margin-top: 200px;  
    width: 128px;  
    box-shadow: 0 1px 3px rgba(0, 0, 0, 5);  
    height: 100px;  
    margin-left: -64px;  
    -webkit-transition: -webkit-transform 1s;  
    transition: transform 1s;  
    -webkit-transform-style: preserve-3d;  
    position: absolute;  
    left: 50%;  
}  
  
li:nth-child(0)  
{  
    -webkit-transform: rotateY(0deg) translateZ(300px);  
}  
  
li:nth-child(1)  
{  
    -webkit-transform: rotateY(40deg) translateZ(300px);  
}  
  
li:nth-child(2)  
{  
    -webkit-transform: rotateY(80deg) translateZ(300px);  
}  
  
li:nth-child(3)  
{  
    -webkit-transform: rotateY(120deg) translateZ(300px);  
}  
  
li:nth-child(4)  
{  
    -webkit-transform: rotateY(160deg) translateZ(300px);  
}  
  
li:nth-child(5)  
{  
    -webkit-transform: rotateY(200deg) translateZ(300px);  
}  
  
li:nth-child(6)  
{  
    -webkit-transform: rotateY(240deg) translateZ(300px);  
}  
  
li:nth-child(7)  
{  
    -webkit-transform: rotateY(280deg) translateZ(300px);  
}  
  
li:nth-child(8)  
{  
    -webkit-transform: rotateY(320deg) translateZ(300px);  
}  
  
li:nth-child(9)  
{  
    -webkit-transform: rotateY(360deg) translateZ(300px);  
}

Copier après la connexion

p#stage comme scène, définir la perspective, définir rotateY et TranslateZ pour chaque li respectivement ; p#container est défini sur -webkit-transform-style:preserve-3d;

transform-style: flat | preserve-3d

où la valeur plate est la valeur par défaut, indiquant que tous les éléments enfants sont rendus sur un Plan 2D. préserver-3d signifie que tous les éléments enfants sont rendus dans l'espace 3D. Si la valeur de style de transformation d'un élément est définie sur préservation-3d, cela signifie que l'opération d'aplatissement n'est pas effectuée et que tous ses éléments enfants sont situés dans l'espace 3D. Dans des circonstances normales, cet attribut est utilisé pour l'élément d'exécution des effets d'animation 3D, c'est-à-dire pour appliquer des effets d'animation 3D, ses éléments enfants doivent donc tous être dans l'espace 3D.

Une chose à noter : dans cet exemple, l'effet d'animation réel est dû au clic de la souris, p#Container change de rotation de manière inappropriée, tous les éléments de l'image sont dans p#container et ont été affichés sous forme d'effet carrousel. , ce que vous devez faire maintenant est de faire pivoter le cheval de Troie, il vous suffit donc de modifier l'angle de rotation Y 40 du conteneur p# à chaque fois.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Propriétés CSS impopulaires que vous ne connaissez pas

Comment le positionnement absolu du CSS peut-il être compatible avec toutes les résolutions ?

Transition des attributs CSS3, animation, transformation

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!