今天博主翻了一下自己的电脑,找到了自己在刚开始接触到web编程时做的一些小页面,想想当初自己开始学习时整的这些花里胡哨的操作,哈哈哈,还有那么些害羞,先给大家看看效果:、

3D旋转相册

html+CSS+javaScript 3D旋转相册_3d

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
p{
color:red;}
*{
padding: 0;
margin: 0;
border: none;
outline: none;
box-sizing: border-box;
}
*:before,*:after{
box-sizing: border-box;
}
html,body{
min-height: 100%;
}
body{ background:#99FF00
background-image: radial-gradient(mintcream 0%, lightgray 100%);;
}
.Container{
margin: 4% auto;
width: 210px;
height: 140px;
position: relative;
perspective: 1000px;
}
#carousel{
width: 100%;
height: 100%;
position: absolute;
transform-style:preserve-3d;
animation: rotation 20s infinite linear;
}
#carousel:hover{
animation-play-state: paused;
}
#carousel figure{
display: block;
position: absolute;
width: 220px;
height: 200px;
left: 10px;
top: 10px;
background: black;
overflow: hidden;
border: solid 5px black;
}
img{
filter: grayscale(0);
cursor: pointer;
transition:all 0.3s ease 0s;
width: 100%;
height: 100%;
}
img:hover{
filter: grayscale(1);
transform: scale(1.2,1.2);
}
#carousel figure:nth-child(1){transform: rotateY(0deg) translateZ(288px);}
#carousel figure:nth-child(2) { transform: rotateY(60deg) translateZ(288px);}
#carousel figure:nth-child(3) { transform: rotateY(120deg) translateZ(288px);}
#carousel figure:nth-child(4) { transform: rotateY(180deg) translateZ(288px);}
#carousel figure:nth-child(5) { transform: rotateY(240deg) translateZ(288px);}
#carousel figure:nth-child(6) { transform: rotateY(300deg) translateZ(288px);}

@keyframes rotation{
from{
transform: rotateY(0deg);
}
to{
transform: rotateY(360deg);
}
}
</style>
<script>
window.onload=function(){
var story = document.getElementById('word');
var s = document.getElementById('show');
var i = 0;
timer=setInterval(function(){
s.innerHTML=story.innerHTML.substring(0,i);
i++;
if(s.innerHTML==story.innerHTML){
clearInterval(timer);
}
},200);
}
</script>
</head>
<body >
<p id="word" style="display:none;"><strong>谨献给所有在这个特殊日子里的那些特殊人群,愿你们珍重。。。
<br>皮一下,感觉不错!<br>
哈哈哈哈哈</p>
<p id="show"></p>
<div class="Container">
<div id="carousel">
<figure><img src="image/9.jpg" ></figure>
<figure><img src="image/10.jpg"></figure>
<figure><img src="image/17.jpg" ></figure>
<figure><img src="image/13.jpg" ></figure>
<figure><img src="image/15.jpg"></figure>
<figure><img src="image/16.jpg" ></figure>
</div>
</div>
</body>
</html>

代码:

3D旋转魔方

html+CSS+javaScript 3D旋转相册_web编程_02

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style type="text/css">
.eyes{
perspective: 1000px;
}
.box{
/*设置3D效果*/
transform-style: preserve-3d;
/*盒子的大小*/
width: 200px;
height: 200px;
background: red;
/*设置盒子的位置,便于观察*/
margin: 400px auto;
/*复合方式设置动画 三者分别为:动画名 执行一次时间 执行方式*/
animation: zhuan 3s ease;
/*令动画无限执行下去*/
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.box div{
width: 200px;
height: 200px;
opacity: 1;
/*设置过渡*/
transition: all 1s ease 0s;
position: absolute;
}
/*调整位置,制作成一个六边形*/
.box .div1{
background: green;
transform: translateZ(100px);
}
.box .div2{
background: green;
transform: translateZ(-100px);
}
.box .div3{
background: green;
transform: rotateX(90deg) translateZ(100px);
}
.box .div4{
background: green;
transform: rotateX(270deg) translateZ(100px);
}
.box .div5{
background: green;
transform: rotateY(-90deg) translateZ(100px);
}
.box .div6{
background: green;
transform: rotateY(90deg) translateZ(100px);
}
/*添加3D旋转效果 让其绕X、Y轴同时旋转90度*/
@keyframes zhuan{
from{
transform: rotateX(0deg) rotateZ(0deg) rotateY(0deg);
}
to{
transform: rotateX(360deg) rotateZ(360deg) rotateY(360deg);
}
}
/*给正方体添加一个hover效果*/
.box:hover .div1{
transform: translateZ(200px);
}
.box:hover .div2{
transform: translateZ(-200px);
}
.box:hover .div3{
transform: rotateX(90deg) translateZ(200px);
}
.box:hover .div4{
transform: rotateX(270deg) translateZ(200px);
}
.box:hover .div5{
transform: rotateY(-90deg) translateZ(200px);
}
.box:hover .div6{
transform: rotateY(90deg) translateZ(200px)
}
</style>
</head>
<body>
<div class="eyes">
<div class="box">
<div class="div1"><img src="image/1.jpg" width="100%" height="100%"></div>
<div class="div2"><img src="image/1.jpg" width="100%" height="100%"></div>
<div class="div3"><img src="image/1.jpg" width="100%" height="100%"></div>
<div class="div4"><img src="image/1.jpg" width="100%" height="100%"></div>
<div class="div5"><img src="image/1.jpg" width="100%" height="100%" ></div>
<div class="div6"><img src="image/1.jpg" width="100%" height="100%" ></div>
</div>
</div>
</body>
</html>