<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动画10-css3实现筛子动画

                    分享 :

                    网盘下载链接:

                    提取密码: u4qi
                    复制提取密码
                    51RGB在线教育,WEB前端开发直播体验课,css3实现筛子动画!源码下载
                    • 详情
                      文件来源

                      官方发布

                      更新日期

                      2018-01-26

                      适用平台

                      All

                      系统位数

                      ALL

                      文件格式

                      exe

                      文件语言

                      英文

                      文件授权

                      免费

                      下载次数

                      33次

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

                      <!DOCTYPE html>
                      <html lang="en">
                      
                      <head>
                      	<meta charset="UTF-8">
                      	<meta name="viewport" content="width=device-width, initial-scale=1.0">
                      	<meta http-equiv="X-UA-Compatible" content="ie=edge">
                      	<title>Document</title>
                      	<style>
                      		html,body,ul {margin: 0;padding: 0;}
                      		body {perspective: 1200px;overflow: hidden;}
                      		ul {
                      			position: relative;
                      			width: 200px;
                      			height: 200px;
                      			margin: 100px auto;
                      			-webkit-transition: preserve-3d;
                      			-moz-transition: preserve-3d;
                      			-ms-transition: preserve-3d;
                      			transition: 5s ease-out;
                      			-webkit-transform-style: preserve-3d;
                      			-moz-transform-style: preserve-3d;
                      			-ms-transform-style: preserve-3d;
                      			transform-style: preserve-3d;
                      			cursor: pointer;
                      		}
                      		ul li {
                      			position: absolute;
                      			top: 0;
                      			left: 0;
                      			width: 100%;
                      			height: 100%;
                      			list-style: none;
                      			color: #fff;
                      			font-size: 24px;
                      			text-align: center;
                      			line-height: 200px;
                      			border-radius: 10%;
                      		}
                      
                      		li:nth-child(1) {
                      			background: rgba(145, 41, 55, 0.9);
                      			-webkit-transform: translateZ(100px);
                      			-moz-transform: translateZ(100px);
                      			-ms-transform: translateZ(100px);
                      			-o-transform: translateZ(100px);
                      			transform: translateZ(100px);
                      		}
                      
                      		li:nth-child(2) {
                      			background: rgba(54, 49, 46, 0.9);
                      			-webkit-transform: rotateY(90deg) translateZ(100px);
                      			-moz-transform: rotateY(90deg) translateZ(100px);
                      			-ms-transform: rotateY(90deg) translateZ(100px);
                      			-o-transform: rotateY(90deg) translateZ(100px);
                      			transform: rotateY(90deg) translateZ(100px);
                      		}
                      
                      		li:nth-child(3) {
                      			background: rgba(149, 121, 123, 0.9);
                      			-webkit-transform: translateZ(-100px);
                      			-moz-transform: translateZ(-100px);
                      			-ms-transform: translateZ(-100px);
                      			-o-transform: translateZ(-100px);
                      			transform: translateZ(-100px);
                      		}
                      
                      		li:nth-child(4) {
                      			background: rgba(102, 99, 79, 0.9);
                      			-webkit-transform: rotateY(-90deg) translateZ(100px);
                      			-moz-transform: rotateY(-90deg) translateZ(100px);
                      			-ms-transform: rotateY(-90deg) translateZ(100px);
                      			-o-transform: rotateY(-90deg) translateZ(100px);
                      			transform: rotateY(-90deg) translateZ(100px);
                      			
                      		}
                      
                      		li:nth-child(5) {
                      			background: rgba(197, 113, 84, 0.9);
                      			-webkit-transform: rotateX(90deg) translateZ(100px);
                      			-moz-transform: rotateX(90deg) translateZ(100px);
                      			-ms-transform: rotateX(90deg) translateZ(100px);
                      			-o-transform: rotateX(90deg) translateZ(100px);
                      			transform: rotateX(90deg) translateZ(100px);
                      		}
                      
                      		li:nth-child(6) {
                      			background: rgba(219, 184, 143, 0.9);
                      			-webkit-transform: rotateX(-90deg) translateZ(100px);
                      			-moz-transform: rotateX(-90deg) translateZ(100px);
                      			-ms-transform: rotateX(-90deg) translateZ(100px);
                      			-o-transform: rotateX(-90deg) translateZ(100px);
                      			transform: rotateX(-90deg) translateZ(100px);
                      		}
                      	</style>
                      </head>
                      
                      <body>
                      	<ul id="box">
                      		<li>IPhone</li>
                      		<li>Sugar</li>
                      		<li>Bill</li>
                      		<li>Thanks</li>
                      		<li>XBox</li>
                      		<li>Doll</li>
                      	</ul>
                      	<script>
                      		window.onload = function(){
                      			wrap.style.cssText = "transform: rotateX(360deg) rotateY(360deg);transition: 1s ease-out;"
                      		}
                      
                      		var wrap = document.getElementById('box');
                      		var degArr = [-360,-270,-180,-90,0,90,180,270,360]; //各个面对应角度
                      		
                      		wrap.onclick = function(){
                      			var round = 4 + Math.floor(Math.random()*9);    //旋转圈数
                      			var randX = Math.floor(Math.random()*9);  //随机X
                      			var randY = Math.floor(Math.random()*9);   //随机Y
                      			var degX = round*360+degArr[randX];
                      			var degY = round*360+degArr[randY];
                      			wrap.style.cssText = "transform: rotateX("+degX+"deg) rotateY("+degY+"deg)";
                      		}
                      
                      	</script>
                      </body>
                      
                      </html>
                      
                    • 使用说明

                      本节课视频资源:

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

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

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