Home  >  Article  >  Web Front-end  >  How to achieve three-dimensional effect in html5

How to achieve three-dimensional effect in html5

藏色散人
藏色散人Original
2023-01-28 10:34:041785browse

html5 Method to achieve three-dimensional effect: 1. Create an HTML sample file; 2. Pass ".img {width: 50px; height: 50px; margin: 0 auto; transform-style: preserve-3d;} " attribute to achieve a three-dimensional effect; 3. Use the "@-webkit-keyframes rotate {...}" attribute to achieve the animation effect.

How to achieve three-dimensional effect in html5

The operating environment of this tutorial: Windows 10 system, HTML5&&CSS3 version, DELL G3 computer

How to achieve three-dimensional effects in html5?

HTML5 Special Effects~3D Cube Rotation

Let’s first appreciate the final effect of this special effect

#

该特效是基于Css3的一些新特性拼接而成.主要用到了hover,transform和@keyframe属性.下面简述一下这三个属性的作用.

hover

效果:当鼠标移到元素上时会展现你定义的hover的样式

使用方法:假定我们有一个类,名为mystyle.修改它的css样式的方式是.mystyle{}.修改它的css hover样式的方式是.mystyle:hover{}.

transform

效果:对元素进行旋转、缩放、移动或倾斜

使用方法:传入旋转rotate(angle),缩放scale(x,y),移动translate(x,y),倾斜skew(angle)的参数进行属性的修改

@keyframe

效果:实现动画效果

使用方法:@keyframe 后 动画名{from:初始状态;to:末状态}

代码解析

<style>    /*实现立体效果*/
    .img {
        width: 50px;
        height: 50px;
        margin: 0 auto;
        transform-style: preserve-3d;        
        /*设置动画播放样式:动画对象 播放速度 时间 播放次数*/
        animation: rotate linear 20s infinite;
    }    /*实现动画效果*/
    @-webkit-keyframes rotate {                /*sofari chrome*/
        from {
            transform: rotateX(0deg) rotateY(0deg);
        }
        to {
            transform: rotateX(360deg) rotateY(360deg);
        }
    }    /*图片样式*/
    .pic{
        width: 200px;
        height: 200px;
        transform: rotateY(0deg) translateZ(100px);
    }</style>

接下来是特效实现的完整代码

<div class="wrap">
    <!--部署内外层图片-->
    <div class="cube">
        <!--前面图片 -->
        <div class="out_front">
            <img src="https://img.php.cn/upload/article/000/000/020/efebb79001a49eda20069a1c0c9bb4e2-0.jpeg" class="pic">
        </div>
        <!--后面图片 -->
        <div class="out_back">
            <img src="https://i.loli.net/2018/10/04/5bb5f23ce7f1e.jpg" class="pic">
        </div>
        <!--左面图片 -->
        <div class="out_left">
            <img src="https://i.loli.net/2018/10/04/5bb5f26e13b28.jpg" class="pic">
        </div>
        <!--右面图片 -->
        <div class="out_right">
            <img src="https://img.php.cn/upload/article/000/000/020/ed16de6f96fb6f509ffd3d176caceca2-3.jpg" class="pic">
        </div>
        <!--上面图片 -->
        <div class="out_top">
            <img src="https://i.loli.net/2018/10/04/5bb5f2725c5c7.jpg" class="pic">
        </div>
        <!--下面图片 -->
        <div class="out_bottom">
            <img src="https://img.php.cn/upload/article/000/000/020/0c1647c0eaf3fedf452e32840e68b09c-5.jpg" class="pic">
        </div>

        <!--小正方体 -->
        <span class="in_front">
                <img src="https://i.loli.net/2018/10/07/5bb9b2e441d7a.jpg" class="in_pic">
            </span>
        <span class="in_back">
                 <img src="https://i.loli.net/2018/10/07/5bb9b2e712b3f.jpg" class="in_pic">
            </span>
        <span class="in_left">
                <img src="https://i.loli.net/2018/10/07/5bb9b2e86ad25.jpg" class="in_pic">
            </span>
        <span class="in_right">
                <img src="https://i.loli.net/2018/10/07/5bb9b2eaba148.jpg" class="in_pic">
            </span>
        <span class="in_top">
                <img src="https://i.loli.net/2018/10/07/5bb9b2ebe5bd9.jpg" class="in_pic">
            </span>
        <span class="in_bottom">
                <img src="https://i.loli.net/2018/10/07/5bb9b2ed867be.jpg" class="in_pic">
            </span>

    </div>
    <style>        /*最外层容器样式*/
        .wrap {
            width: 100px;
            height: 100px;
            margin: 150px;
            position: relative;
        }        /*得到立方体效果*/
        .cube {
            width: 50px;
            height: 50px;
            margin: 0 auto;
            transform-style: preserve-3d;            /*设置动画播放样式:动画对象 播放速度 时间 播放次数*/
            animation: rotate linear 20s infinite;
        }        /*动画旋转的方式*/
        /*得到动画效果*/
        @-moz-keyframes rotate {                     /*firefox*/
            from {
                transform: rotateX(0deg) rotateY(0deg);
            }
            to {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
        @-webkit-keyframes rotate {                /*sofari chrome*/
            from {
                transform: rotateX(0deg) rotateY(0deg);
            }
            to {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
        @-o-keyframes rotate {                    /*opera*/
            from {
                transform: rotateX(0deg) rotateY(0deg);
            }
            to {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }        /*每张图片的样式*/
        .cube div {
            position: absolute;
            width: 200px;
            height: 200px;
            opacity: 0.8;            /*过渡效果*/
            transition: all .4s;
        }        /*定义所有图片样式*/
        .pic {
            width: 200px;
            height: 200px;
        }

        .cube .out_front {
            transform: rotateY(0deg) translateZ(100px);
        }

        .cube .out_back {
            transform: translateZ(-100px) rotateY(180deg);
        }

        .cube .out_left {
            transform: rotateY(-90deg) translateZ(100px);
        }

        .cube .out_right {
            transform: rotateY(90deg) translateZ(100px);
        }

        .cube .out_top {
            transform: rotateX(90deg) translateZ(100px);
        }

        .cube .out_bottom {
            transform: rotateX(-90deg) translateZ(100px);
        }        /*定义小正方体样式*/
        .cube span {
            display: block;
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50px;
            left: 50px;
        }

        .cube .in_pic {
            width: 100px;
            height: 100px;
        }

        .cube .in_front {
            transform: rotateY(0deg) translateZ(50px);
        }

        .cube .in_back {
            transform: translateZ(-50px) rotateY(180deg);
        }

        .cube .in_left {
            transform: rotateY(-90deg) translateZ(50px);
        }

        .cube .in_right {
            transform: rotateY(90deg) translateZ(50px);
        }

        .cube .in_top {
            transform: rotateX(90deg) translateZ(50px);
        }

        .cube .in_bottom {
            transform: rotateX(-90deg) translateZ(50px);
        }        /*鼠标移入后样式*/
        .cube:hover .out_front {
            transform: rotateY(0deg) translateZ(200px);
        }

        .cube:hover .out_back {
            transform: translateZ(-200px) rotateY(180deg);
        }

        .cube:hover .out_left {
            transform: rotateY(-90deg) translateZ(200px);
        }

        .cube:hover .out_right {
            transform: rotateY(90deg) translateZ(200px);
        }

        .cube:hover .out_top {
            transform: rotateX(90deg) translateZ(200px);
        }

        .cube:hover .out_bottom {
            transform: rotateX(-90deg) translateZ(200px);
        }
    </style>
</div>

推荐学习:《HTML5视频教程

The above is the detailed content of How to achieve three-dimensional effect in html5. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn