<form id="htvdb"></form>

            <form id="htvdb"><nobr id="htvdb"></nobr></form>

              <address id="htvdb"></address>

              <form id="htvdb"><form id="htvdb"><nobr id="htvdb"></nobr></form></form>
              <form id="htvdb"></form>


                    51rgb-css3动画18-炸开3d立体盒子动画特效

                    分享 :

                    网盘下载链接:

                    提取密码: u4qi
                    复制提取密码
                    51RGB在线教育,WEB前端开发直播体验课,炸开3d立体盒子动画特效!源码下载
                    • 详情
                      文件来源

                      官方发布

                      更新日期

                      2018-01-26

                      适用平台

                      All

                      系统位数

                      ALL

                      文件格式

                      zip

                      文件语言

                      中文

                      文件授权

                      免费

                      下载次数

                      0次

                      源码,可以直接复制使用!

                      <!doctype html>
                      <html>
                      <head>
                      <meta charset="utf-8">
                      <title>3D立方体旋转动画</title>
                      <style type="text/css">
                      @keyframes rotate{
                      	0%{transform:rotateX(0deg) rotateY(0deg);}
                      	100%{transform:rotateX(360deg) rotateY(360deg);}
                      	}
                      @-webkit-keyframes rotate{
                      	0%{transform:rotateX(0deg) rotateY(0deg);}
                      	100%{transform:rotateX(360deg) rotateY(360deg);}
                      	}
                      html{background:#02C3E2;height:100%;}
                      .wrap{margin:300px auto;perspective:1000px;width:200px;height:200px;}
                      .cube{margin:auto;width:200px;height:200px;position:relative;transform-style:preserve-3d;animation:rotate 5s infinite linear;}
                      .cube > div{width:100%;height:100%;position:absolute;background-color:#333;opacity:.9;border:1px solid #fff;color:#fff;font-size:36px;font-family:"微软雅黑";font-weight:bold;text-align:center;line-height:200px;transition:transform .2s ease-in;-webkit-transition:transform .2s ease-in;}
                      .cube > span{display:block;width:100px;height:100px;border:1px solid #000;background-color:#999;position:absolute;top:50px;left:50px;}
                      .cube > span img{width:100px;height:100px;}
                      .cube .out-front{transform:translateZ(100px);-moz-transform:translateZ(100px);-webkit-transform:translateZ(100px);}
                      .cube .out-back{transform:translateZ(-100px) rotateY(180deg);-moz-transform:translateZ(-100px) rotateY(180deg);-webkit-transform:translateZ(-100px) rotateY(180deg)}
                      .cube .out-left{transform:translateX(-100px) rotateY(-90deg);-moz-transform:translateX(-100px) rotateY(-90deg);-webkit-transform:translateX(-100px) rotateY(-90deg);}
                      .cube .out-right{transform:translateX(100px) rotateY(90deg);-moz-transform:translateX(100px) rotateY(90deg);-webkit-transform:translateX(100px) rotateY(90deg);}
                      .cube .out-top{transform:translateY(-100px) rotateX(90deg);-moz-transform:translateY(-100px) rotateX(90deg);-webkit-transform:translateY(-100px) rotateX(90deg);}
                      .cube .out-bottom{transform:translateY(100px) rotateX(-90deg);-moz-transform:translateY(100px) rotateX(-90deg);-webkit-transform:translateY(100px) rotateX(-90deg);}
                      
                      .cube .in-front{transform:translateZ(50px);-moz-transform:translateZ(50px);-webkit-transform:translateZ(50px);}
                      .cube .in-back{transform:translateZ(-50px) rotateY(180deg);-moz-transform:translateZ(-50px) rotateY(180deg);-webkit-transform:translateZ(-50px) rotateY(180deg)}
                      .cube .in-left{transform:translateX(-50px) rotateY(-90deg);-moz-transform:translateX(-50px) rotateY(-90deg);-webkit-transform:translateX(-50px) rotateY(-90deg);}
                      .cube .in-right{transform:translateX(50px) rotateY(90deg);-moz-transform:translateX(50px) rotateY(90deg);-webkit-transform:translateX(50px) rotateY(90deg);}
                      .cube .in-top{transform:translateY(-50px) rotateX(90deg);-moz-transform:translateY(-50px) rotateX(90deg);-webkit-transform:translateY(-50px) rotateX(90deg);}
                      .cube .in-bottom{transform:translateY(50px) rotateX(-90deg);-moz-transform:translateY(50px) rotateX(-90deg);-webkit-transform:translateY(50px) rotateX(-90deg);}
                      
                      .wrap:hover .cube .out-front{transform:translateZ(200px);-moz-transform:translateZ(200px);-webkit-transform:translateZ(200px);}
                      .wrap:hover .cube .out-back{transform:translateZ(-200px) rotateY(180deg);-moz-transform:translateZ(-200px) rotateY(180deg);-webkit-transform:translateZ(-200px) rotateY(180deg)}
                      .wrap:hover .cube .out-left{transform:translateX(-200px) rotateY(-90deg);-moz-transform:translateX(-200px) rotateY(-90deg);-webkit-transform:translateX(-200px) rotateY(-90deg);}
                      .wrap:hover .cube .out-right{transform:translateX(200px) rotateY(90deg);-moz-transform:translateX(200px) rotateY(90deg);-webkit-transform:translateX(200px) rotateY(90deg);}
                      .wrap:hover .cube .out-top{transform:translateY(-200px) rotateX(90deg);-moz-transform:translateY(-200px) rotateX(90deg);-webkit-transform:translateY(-200px) rotateX(90deg);}
                      .wrap:hover .cube .out-bottom{transform:translateY(200px) rotateX(-90deg);-moz-transform:translateY(200px) rotateX(-90deg);-webkit-transform:translateY(200px) rotateX(-90deg);}
                      
                      .UI{height: 200px; text-align: center;color: white;font-size: 80px; font-family:"楷体";}
                      </style>
                      </head>
                      
                      <body>
                      
                      <div class="wrap">
                      
                            <div class="cube">
                                  <div class="out-front"><img src="ps.jpg"></div>
                      
                                  <div class="out-back"><img src="dw2.png"></div>
                      
                                  <div class="out-left"><img src="Ai.png"></div>
                      
                                  <div class="out-right"><img src="pr.jpg"></div>
                      
                                  <div class="out-top"><img src="Ae.png"></div>
                      
                                  <div class="out-bottom"><img src="c4da.png"></div>
                      
                                  <span class="in-front"><img src="UI设计.jpg"></span>
                                  <span class="in-back"><img src="UI设计.jpg"></span>
                                  <span class="in-left"><img src="UI设计.jpg"></span>
                                  <span class="in-right"><img src="UI设计.jpg"></span>
                                  <span class="in-top"><img src="UI设计.jpg"></span>
                                  <span class="in-bottom"><img src="UI设计.jpg"></span>
                            </div>
                            
                      </div>
                      <div class="UI">UI设计派</div>
                      </body>
                      </html>
                      
                      
                    • 使用说明

                      本节课视频资源:

                      课程在线回放地址:http://www.gonooa.com/video/page-29/278.html

                      关注微信公众号:网页设计自学平台 回复:【css3动画】关键字即可获取全套css3动画教程及源码

                    • 相关下载
                    北京赛车玩法和赔率|官网_首页