Code Monkey home page Code Monkey logo

temp's People

Contributors

oopswc avatar

Watchers

avatar

temp's Issues

css 

    . {
	  		margin:0px;
	  		padding:0px;
	  }
	  
       .container{
        width: 300px;
        height: 300px;
        top:50px;
        left:50px;
        position:absolute;
        transform:rotateX(45deg) rotateY(45deg) perspective(400px);
        transform-style:preserve-3d;
        // -webkit-animation:xuanzhuan 5s linear infinite alternate forwards;
        //background-color:orangered;
        
	 }
	 
	 .box {
	 	  width: 400px;
        height: 400px;
        margin: 100px  auto;
        position:relative;
	 }

    .div{
        width: 200px;
        height: 200px;
        margin: 50px 50px;
        font-size: 80px;
        line-height: 200px;
        text-align: center;
        position:absolute;
        display:block;
    }
    
    .arrow{
    	  position:absolute;
    	  height:40px;
    	  width:40px;
    	  text-align:center;
    	  font-size:40px;
    	  font-weight:bold;
    	  display:none;
    	  
    }

    #div1{
        transform:translateX(-100px) rotateY(90deg);
        background-color: red;
        background-image:url("../1280_1024/1.jpg");
        background-size:cover;
    }
    #div2{
        transform:translateX(100px) rotateY(90deg);
        background-color: green;
        background-image:url("../1280_1024/2.jpg");
        background-size:cover;
    }
    #div3{
        transform:translateY(-100px) rotateX(90deg);
        background-color: blue;
        background-image:url("../1280_1024/3.jpg");
        background-size:cover;
    }
    #div4{
        transform:translateY(100px) rotateX(90deg);
        background-color: yellow;
        background-image:url("../1280_1024/4.jpg");
        background-size:cover;
    }
    #div5{
        transform:translateZ(100px) ;
        background-color: pink;
        background-image:url("../1280_1024/5.jpg");
        background-size:cover;
    }
    #div6{
        transform:translateZ(-100px) ;
        background-color: black;
        background-image:url("../1280_1024/6.jpg");
        background-size:cover;
    }
    
    #left-arrow{
    	  left:0px;
    	  top:180px;
    }
    
    #down-arrow{
    	  left:180px;
    	  bottom:0px;
    }
    
    #right-arrow{
    	  right:0px;
    	  top:180px;
    }
    
    #top-arrow{
    	  left:180px;
    	  top:0px;
    }
    
    .box:hover .arrow{
    		display:block;
    }
    
    @-webkit-keyframes xuanzhuan {
    	from { transform:perspective(400px) rotatey(0deg);	}
    	to { transform:perspective(400px) rotatey(360deg); }
    }
    
    @keyframes xuanzhuan {
    	from { transform:perspective(400px) rotateY(0deg);	}
    	to { transform:perspective(400px) rotateY(360deg); }
    }

css

<title>Title</title> <style> 
	  . {
	  		margin:0px;
	  		padding:0px;
	  }
	  
       .container{
        width: 300px;
        height: 300px;
        top:50px;
        left:50px;
        position:absolute;
        transform:rotateX(45deg) rotateY(45deg) perspective(400px);
        transform-style:preserve-3d;
        // -webkit-animation:xuanzhuan 5s linear infinite alternate forwards;
        //background-color:orangered;
        
	 }
	 
	 .box {
	 	  width: 400px;
        height: 400px;
        margin: 100px  auto;
        position:relative;
	 }

    .div{
        width: 200px;
        height: 200px;
        margin: 50px 50px;
        font-size: 80px;
        line-height: 200px;
        text-align: center;
        position:absolute;
        display:block;
    }
    
    .arrow{
    	  position:absolute;
    	  height:40px;
    	  width:40px;
    	  text-align:center;
    	  font-size:40px;
    	  font-weight:bold;
    	  display:none;
    	  
    }

    #div1{
        transform:translateX(-100px) rotateY(90deg);
        background-color: red;
        background-image:url("../1280_1024/1.jpg");
        background-size:cover;
    }
    #div2{
        transform:translateX(100px) rotateY(90deg);
        background-color: green;
        background-image:url("../1280_1024/2.jpg");
        background-size:cover;
    }
    #div3{
        transform:translateY(-100px) rotateX(90deg);
        background-color: blue;
        background-image:url("../1280_1024/3.jpg");
        background-size:cover;
    }
    #div4{
        transform:translateY(100px) rotateX(90deg);
        background-color: yellow;
        background-image:url("../1280_1024/4.jpg");
        background-size:cover;
    }
    #div5{
        transform:translateZ(100px) ;
        background-color: pink;
        background-image:url("../1280_1024/5.jpg");
        background-size:cover;
    }
    #div6{
        transform:translateZ(-100px) ;
        background-color: black;
        background-image:url("../1280_1024/6.jpg");
        background-size:cover;
    }
    
    #left-arrow{
    	  left:0px;
    	  top:180px;
    }
    
    #down-arrow{
    	  left:180px;
    	  bottom:0px;
    }
    
    #right-arrow{
    	  right:0px;
    	  top:180px;
    }
    
    #top-arrow{
    	  left:180px;
    	  top:0px;
    }
    
    .box:hover .arrow{
    		display:block;
    }
    
    @-webkit-keyframes xuanzhuan {
    	from { transform:perspective(400px) rotatey(0deg);	}
    	to { transform:perspective(400px) rotatey(360deg); }
    }
    
    @keyframes xuanzhuan {
    	from { transform:perspective(400px) rotateY(0deg);	}
    	to { transform:perspective(400px) rotateY(360deg); }
    }
</style>
</head>

<div class="arrow" id="left-arrow">&lt</div>
<div class="arrow" id="down-arrow">v</div>
<div class="arrow" id="right-arrow">&gt</div>
<div class="arrow" id="top-arrow">^</div>

3d

<title>Title</title> <style> 
	  . {
	  		margin:0px;
	  		padding:0px;
	  }
	  
       .container{
        width: 300px;
        height: 300px;
        top:50px;
        left:50px;
        position:absolute;
        transform:rotateX(45deg) rotateY(45deg) perspective(400px);
        transform-style:preserve-3d;
        // -webkit-animation:xuanzhuan 5s linear infinite alternate forwards;
        //background-color:orangered;
        
	 }
	 
	 .box {
	 	  width: 400px;
        height: 400px;
        margin: 100px  auto;
        position:relative;
	 }

    .div{
        width: 200px;
        height: 200px;
        margin: 50px 50px;
        font-size: 80px;
        line-height: 200px;
        text-align: center;
        position:absolute;
        display:block;
    }
    
    .arrow{
    	  position:absolute;
    	  height:40px;
    	  width:40px;
    	  text-align:center;
    	  font-size:40px;
    	  font-weight:bold;
    	  display:none;
    	  
    }

    #div1{
        transform:translateX(-100px) rotateY(90deg);
        background-color: red;
        background-image:url("../1280_1024/1.jpg");
        background-size:cover;
    }
    #div2{
        transform:translateX(100px) rotateY(90deg);
        background-color: green;
        background-image:url("../1280_1024/2.jpg");
        background-size:cover;
    }
    #div3{
        transform:translateY(-100px) rotateX(90deg);
        background-color: blue;
        background-image:url("../1280_1024/3.jpg");
        background-size:cover;
    }
    #div4{
        transform:translateY(100px) rotateX(90deg);
        background-color: yellow;
        background-image:url("../1280_1024/4.jpg");
        background-size:cover;
    }
    #div5{
        transform:translateZ(100px) ;
        background-color: pink;
        background-image:url("../1280_1024/5.jpg");
        background-size:cover;
    }
    #div6{
        transform:translateZ(-100px) ;
        background-color: black;
        background-image:url("../1280_1024/6.jpg");
        background-size:cover;
    }
    
    #left-arrow{
    	  left:0px;
    	  top:180px;
    }
    
    #down-arrow{
    	  left:180px;
    	  bottom:0px;
    }
    
    #right-arrow{
    	  right:0px;
    	  top:180px;
    }
    
    #top-arrow{
    	  left:180px;
    	  top:0px;
    }
    
    .box:hover .arrow{
    		display:block;
    }
    
    @-webkit-keyframes xuanzhuan {
    	from { transform:perspective(400px) rotatey(0deg);	}
    	to { transform:perspective(400px) rotatey(360deg); }
    }
    
    @keyframes xuanzhuan {
    	from { transform:perspective(400px) rotateY(0deg);	}
    	to { transform:perspective(400px) rotateY(360deg); }
    }
</style>

<script>
window.onload = function(){
   var box = document.getElementById("box");
   var container = document.getElementById("container");
	var rarrow = document.getElementById("right-arrow");
	var darrow = document.getElementById("down-arrow");
	var larrow = document.getElementById("left-arrow");
	var tarrow = document.getElementById("top-arrow");
	var left = container.offsetLeft
	var index = 0;
	var flag =false;
	var timer;
	var offsetx = 0;
	var offsety = 0;
	
	var play=function(){
		timer = setInterval(function(){
		
			var degx = (index+offsetx)%360;
			var degy = (index+offsety)%360;
			container.style.cssText="transform:rotateX(" +  degx +"deg) rotateY(" +  degy +"deg)";
			index =index+1;

		},20)
		
	}
	
	var stop=function(){
		 clearInterval(timer)
	}
	
	container.ondblclick = function(){
		flag = !flag;
		if (flag===true){
			stop();
		}else{
			play(0);
		}
	}

	box.onmousedown = function(evt){
	var oevent = evt || event;
	disx = oevent.clientX-box.offsetLeft;
	disy = oevent.clientY-box.offsetTop;
	
	document.onmousemove = function(evt){
		var oevent = evt ||event;
		box.style.left = oevent.clientX - disx +"px";
		box.style.top = oevent.clientY - disy +"px";
	}
	
	document.onmouseup = function(){
		document.onmousemove = null;
		document.onmousup = null;
	}

	}

	
	rarrow.onmousedown = function(){
	   var offy;
		offy = setInterval(function(){
			offsety = offsety+1;
		},10)
		
		rarrow.onmouseup = function(){
		clearInterval(offy)
		}
	}
	
	darrow.onmousedown = function(){
	   var offx;
		offx = setInterval(function(){
			offsetx = offsetx+1;
		},10)
		
		darrow.onmouseup = function(){
		clearInterval(offx)
		}
	}
	
	larrow.onmousedown = function(){
	   var offy;
		offy = setInterval(function(){
			offsety = offsety-1;
		},5)
		
		larrow.onmouseup = function(){
		clearInterval(offy)
		}
	}
	
	tarrow.onmousedown = function(){
	   var offx;
		offx = setInterval(function(){
			offsetx = offsetx-1;
		},5)
		
		tarrow.onmouseup = function(){
		clearInterval(offx)
		}
	}

	play();
}
</script>

<div class="arrow" id="left-arrow">&lt</div>
<div class="arrow" id="down-arrow">v</div>
<div class="arrow" id="right-arrow">&gt</div>
<div class="arrow" id="top-arrow">^</div>

clock 

    <script charset="Shift_JIS"   src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.js">
    </script>

calendar 

   <style>
    . {
        margin:0px;
        padding:0px
        border:0px;
    }

    .user-select {
        -webkit-user-select:none;
        user-select:none;
    }

    #box {
        position:relative;
        margin:10px auto;
        width:400px;
        height:500px;
        background-color:#ccc;
        text-align:center;
    }

    #header {
        position:absolute;
        border:2px solid black;
        top:0px;
        left:0px;
        width:396px;
        height:40px;
        font-size:20px;
        font-weight:bold;
    }
    #header .show {
        position:absolute;
        width:80px;
        height:40px;
        display:block;
        line-height:40px;

    }

    #header .show:hover {
        cursor:pointer;
    }

    #prev {
        left:0px;
    }
    #next {
        right:0px;
    }

    #prev:active {
        color:red;
    }
    #next:active {
        color:red;
    }

    #today {
        left:120px;
    }
    #clock {
        left:180px;
        margin-left:20px;
    }

    #content {
        position:absolute;
        top:42px;
        left:0px;
        margin:0px;
        width:396px;
        height:454px;
        border:2px solid black;
        border-top: none;
        font-size:20px;
        font-weight:bold;
    }

    #nev {
        position:absolute:
        top:0px;
        left:0px;
        margin-top:2px;
        width:396px;
        height:40px;
    }

    #main {
        position:absolute:
        top:0px;
        left:0px;
        margin-top:2px;
        width:396px;
        height:408px;
    }

    td {
        //border:1px solid black;
        width:14.28%;
    }


    </style>

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.