Maison > Article > interface Web > Pure CSS3 réalise des effets spéciaux d'animation de rotation de cube d'image 3D

Pure CSS3 réalise des effets spéciaux d'animation de rotation de cube d'image 3D

黄舟original: 2017-05-28 13:04:473457parcourir

Module cube 3D pur css3, lorsque l'on touche la souris, le module explose, avec un petit cube à l'intérieur d'un gros cube

Le rendu est le suivant :

Le code est le suivant :

<!DOCTYPE html><html><head>
    <meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>css-3d旋转相册_何问起</title><base target="_blank" />
    <link rel="stylesheet" href="http://hovertree.com/texiao/css3/34/hovertree.css" /></head><body>
    <p class="hovertreeinfo">
    <h2>何问起css-3d旋转相册</h2>请把光标移到立方体上面，或者点击图片。<input type="button" value="还原" /></p>
    <!--/*外层最大容器*/-->
    <p class="wrap">
        <!--    /*包裹所有元素的容器*/-->
        <p class="cube">
            <!--前面图片 -->
            <p class="out_front">
                <img src="http://hovertree.com/hvtimg/bjafjg/p1n3aebo.jpg" class="pic" />
            </p>
            <!--后面图片 -->
            <p class="out_back">
                <img src="http://hovertree.com/hvtimg/bjafjg/6omilcpi.png" class="pic" />
            </p>
            <!--左图片 -->
            <p class="out_left">
                <img src="http://hovertree.com/hvtimg/bjafjg/7ciu9jqt.jpg" class="pic" />
            </p>
            <p class="out_right">
                <img src="http://hovertree.com/hvtimg/bjafjg/x9h3ho61.jpg" class="pic" />
            </p>
            <p class="out_top">
                <img src="http://hovertree.com/hvtimg/bjafjg/1rysrqvg.jpg" class="pic" />
            </p>
            <p class="out_bottom">
                <img src="http://hovertree.com/hvtimg/bjafjg/nre7yne5.jpg" class="pic" />
            </p>
            <!--小正方体 -->
            <span class="in_front">
                <img src="http://hovertree.com/hvtimg/bjafjg/wctv4yie.jpg" class="in_pic" />
            </span>
            <span class="in_back">
                <img src="http://hovertree.com/hvtimg/bjafjg/d1w0ani7.jpg" class="in_pic" />
            </span>
            <span class="in_left">
                <img src="http://hovertree.com/hvtimg/bjafjg/dys40n99.jpg" class="in_pic" />
            </span>
            <span class="in_right">
                <img src="http://hovertree.com/hvtimg/bjafjg/6sqnrrgc.jpg" class="in_pic" />
            </span>
            <span class="in_top">
                <img src="http://hovertree.com/hvtimg/bjafjg/o73nrdo4.jpg" class="in_pic" />
            </span>
            <span class="in_bottom">
                <img src="http://hovertree.com/hvtimg/bjafjg/gq0yvbe0.jpg" class="in_pic" />
            </span>
        </p>
    </p>
    <p class="hovertreeinfo"><a href="http://hovertree.com">何问起</a><a href="http://hovertree.com/menu/texiao/">网页特效</a> 
    <a href="http://hovertree.com/h/bjaf/ysr2o1du.htm">代码说明</a>
    <br />
    手机扫描下面二维码：<br />
    <img src="https://img.php.cn/upload/article/000/000/194/3577bca7142c838eb0451735933989fd-0.png" alt="二维码"/>
    </p></body></html>

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：css3+jQuery réalise le menu en anneau contextuel du site Web de jeux d'imitationArticle suivant：css3+jQuery réalise le menu en anneau contextuel du site Web de jeux d'imitation

Articles Liés

Voir plus