temp's People
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); }
}
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>
clock
<script charset="Shift_JIS" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.js">
</script>
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); }
}
</style>
</head>
<div class="arrow" id="left-arrow"><</div>
<div class="arrow" id="down-arrow">v</div>
<div class="arrow" id="right-arrow">></div>
<div class="arrow" id="top-arrow">^</div>
3d
. {
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"><</div>
<div class="arrow" id="down-arrow">v</div>
<div class="arrow" id="right-arrow">></div>
<div class="arrow" id="top-arrow">^</div>
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.