html5如何实现三维效果

发布时间:2023-01-30 11:01:39 作者:iii
来源:亿速云 阅读:142

这篇文章主要介绍“html5如何实现三维效果”,在日常操作中,相信很多人在html5如何实现三维效果问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”html5如何实现三维效果”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

html5实现三维效果的方法:1、创建一个HTML示例文件;2、通过“.img {width: 50px;height: 50px;margin: 0 auto;transform-style: preserve-3d;}”属性实现三维立体效果;3、通过“@-webkit-keyframes rotate {...}”属性实现动画效果即可。

基于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如何实现三维效果”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

推荐阅读:
  1. h5和php哪个更容易一点
  2. 学习H5和CSS3需要会哪些知识点呢

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

html5

上一篇:html5如何实现放大镜功能

下一篇:css浏览器乱码如何解决

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》