旋转相册
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旋转相册</title>
<link type="text/css" href="./css/1.css" rel="stylesheet ">
</head>
<body>
<div class="content">
<div class="box">
<img src="images/1.png" alt=""/>
<img src="images/2.png" alt=""/>
<img src="images/3.png" alt=""/>
<img src="images/4.png" alt=""/>
<img src="images/5.png" alt=""/>
<img src="images/6.png" alt=""/>
<img src="images/7.png" alt=""/>
<img src="images/8.png" alt=""/>
<img src="images/9.png" alt=""/>
</div>
</div>
</body>
</html>
body,div,p,ul,ol,li,dl,dt,dd,table,tr,td,form,hr,fieldset,h1,h2,h3,h4,h5,h6,img,input{
margin:0;
padding:0;
}
body{
background: black;
}
.content{
width: 200px;
height: 150px;
position: relative;
margin:200px auto 0;
perspective: 1500px;
}
.box{
width: 200px;
height: 150px;
transform-style: preserve-3d;
transform:rotateX(-30deg);
animation:photo 15s linear infinite;
}
.box:hover{
animation:photo 15s linear infinite paused;
}
.box img{
width: 200px;
height: 150px;
position: absolute;
left: 0;
top: 0;
transform-style: preserve-3d;
transition: all 1s;
}
.box img:nth-child(1){
transform:translateZ(280px);
}
.box img:nth-child(2){
transform:rotateY(40deg) translateZ(280px);
}
.box img:nth-child(3){
transform:rotateY(80deg) translateZ(280px);
}
.box img:nth-child(4){
transform:rotateY(120deg) translateZ(280px);
}
.box img:nth-child(5){
transform:rotateY(160deg) translateZ(280px);
}
.box img:nth-child(6){
transform:rotateY(200deg) translateZ(280px);
}
.box img:nth-child(7){
transform:rotateY(240deg) translateZ(280px);
}
.box img:nth-child(8){
transform:rotateY(280deg) translateZ(280px);
}
.box img:nth-child(9){
transform:rotateY(320deg) translateZ(280px);
}
.box img:nth-child(1):hover{
transform:translateZ(280px) scale(1.2);
}
.box img:nth-child(2):hover{
transform:rotateY(40deg) translateZ(280px) scale(1.2);
}
.box img:nth-child(3):hover{
transform:rotateY(80deg) translateZ(280px) scale(1.2);
}
.box img:nth-child(4):hover{
transform:rotateY(120deg) translateZ(280px) scale(1.2);
}
.box img:nth-child(5):hover{
transform:rotateY(160deg) translateZ(280px) scale(1.2);
}
.box img:nth-child(6):hover{
transform:rotateY(200deg) translateZ(280px) scale(1.2);
}
.box img:nth-child(7):hover{
transform:rotateY(240deg) translateZ(280px) scale(1.2);
}
.box img:nth-child(8):hover{
transform:rotateY(280deg) translateZ(280px) scale(1.2);
}
.box img:nth-child(9):hover{
transform:rotateY(320deg) translateZ(280px) scale(1.2);
}
@keyframes photo{
0%{
transform:rotateX(-30deg) rotateY(0deg);
}
100%{
transform:rotateX(-30deg) rotateY(360deg);
}
}
旋转相册
New Document
<!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>
<link type="text/css" href="./css/2.css" rel="stylesheet ">
<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>www
<br>lilsaey<br>
cn</p>
<p id="show"></p>
<div class="Container">
<div id="carousel">
<figure><img src="images/1.png" ></figure>
<figure><img src="images/2.png"></figure>
<figure><img src="images/3.png" ></figure>
<figure><img src="images/4.png" ></figure>
<figure><img src="images/5.png"></figure>
<figure><img src="images/6.png" ></figure>
</div>
</div>
</body>
</html>
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);
}
}
New Document
旋转立方体相册
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>旋转立方体相册</title>
<link type="text/css" href="./css/3.css" rel="stylesheet ">
</head>
<body>
<div class="eyes">
<div class="box">
<div class="div1"><img src="images/1.png" width="100%" height="100%"></div>
<div class="div2"><img src="images/2.png" width="100%" height="100%"></div>
<div class="div3"><img src="images/3.png" width="100%" height="100%"></div>
<div class="div4"><img src="images/4.png" width="100%" height="100%"></div>
<div class="div5"><img src="images/5.png" width="100%" height="100%" ></div>
<div class="div6"><img src="images/6.png" width="100%" height="100%" ></div>
<div class="div7"><img src="images/7.png" width="100%" height="100%" ></div>
</div>
</div>
</body>
</html>
.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)
}
旋转立方体相册
旋转内含立方体相册
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link type="text/css" href="./css/4.css" rel="stylesheet ">
<title>旋转内含立方体相册</title>
</head>
<body>
<div id="react">
<div class="out_front">
<img src="./images/1.png" class="out_pic">
</div>
<div class="out_back">
<img src="./images/2.png" class="out_pic">
</div>
<div class="out_left">
<img src="./images/3.png" class="out_pic">
</div>
<div class="out_right">
<img src="./images/4.png" class="out_pic">
</div>
<div class="out_top">
<img src="./images/5.png" class="out_pic">
</div>
<div class="out_bottom">
<img src="./images/6.png" class="out_pic">
</div>
<span class="in_front">
<img src="./images/7.png" class="in_pic">
</span>
<span class="in_back">
<img src="./images/8.png" class="in_pic">
</span>
<span class="in_left">
<img src="./images/9.png" class="in_pic">
</span>
<span class="in_right">
<img src="./images/10.png" class="in_pic">
</span>
<span class="in_top">
<img src="./images/11.png" class="in_pic">
</span>
<span class="in_bottom">
<img src="./images/12.png" class="in_pic">
</span>
</div>
</body>
</html>
<pre name="code" class="css">*{
padding:0;
margin:0;
}
body{
width:100%;
height:100%;
background:#06081B;
}
#react{
width: 200px;
height:200px;
margin: 200px auto;
transform-style:preserve-3d;
animation:rotate 20s infinite;
animation-timing-function: linear;
}
#react div{
position:absolute;
transition: all .4s;
}
div .out_pic{
width:200px;
height:200px;
opacity:0.9;
}
div .in_pic{
width:100px;
height:100px;
}
#react span{
display:block;
position:absolute;
width:100px;
height:100px;
top:50px;
left:50px;
}
@keyframes rotate{
from{transform: rotateX(0deg) rotateY(0deg);}
to{transform: rotateX(360deg) rotateY(360deg);}
}
.out_front{
transform:translateZ(100px);
}
.out_back{
transform:translateZ(-100px);
}
.out_left{
transform:rotateY(90deg) translateZ(100px);
}
.out_right{
transform: rotateY(-90deg) translateZ(100px);
}
.out_top{
transform:rotateX(90deg) translateZ(100px);
}
.out_bottom{
transform: rotateX(-90deg) translateZ(100px);
}
.in_front{
transform:translateZ(50px);
}
.in_back{
transform:translateZ(-50px);
}
.in_left{
transform:rotateY(90deg) translateZ(50px);
}
.in_right{
transform: rotateY(-90deg) translateZ(50px);
}
.in_top{
transform:rotateX(90deg) translateZ(50px);
}
.in_bottom{
transform: rotateX(-90deg) translateZ(50px);
}
/*外面的图片散开*/
#react:hover .out_front{
transform:translateZ(200px);
}
#react:hover .out_back{
transform:translateZ(-200px);
}
#react:hover .out_left{
transform:rotateY(90deg) translateZ(200px);
}
#react:hover .out_right{
transform: rotateY(-90deg) translateZ(200px);
}
#react:hover .out_top{
transform:rotateX(90deg) translateZ(200px);
}
#react:hover .out_bottom{
transform: rotateX(-90deg) translateZ(200px);
}
/*里面的图片散开*/
#react:hover .in_front{
transform:translateZ(100px);
}
#react:hover .in_back{
transform:translateZ(-100px);
}
#react:hover .in_left{
transform:rotateY(90deg) translateZ(100px);
}
#react:hover .in_right{
transform: rotateY(-90deg) translateZ(100px);
}
#react:hover .in_top{
transform:rotateX(90deg) translateZ(100px);
}
#react:hover .in_bottom{
transform: rotateX(-90deg) translateZ(100px);
}
@charset "utf-8";
/* CSS Document */
旋转内含立方体相册
屏风相册
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>屏风相册</title>
<link type="text/css" href="./css/5.css" rel="stylesheet ">
</head>
<body>
<div class="show">
<div class="box">
<img src="images/1.png" class="img1"/>
<img src="images/2.png" class="img2"/>
<img src="images/3.png" class="img3" />
<img src="images/4.png" class="img4" />
<img src="images/5.png" class="img5"/>
<img src="images/6.png" class="img6"/>
<img src="images/7.png" class="img7" />
<img src="images/8.png" class="img8" />
<img src="images/9.png" class="img9" />
<img src="images/10.png" class="img10" />
<img src="images/11.png" class="img11" />
<img src="images/12.png" class="img12" />
</div>
</div>
</body>
</html>
body{background: #06081B;
perspective: 5000px;
}
.show{perspective: 5000px;
-webkit-transform: rotateX(-45deg);
-moz-transform: rotateX(-45deg);
transform: rotateX(-45deg);
transform-style: preserve-3d;
}
.box{
position: relative;width: 150px;height: 250px;border: 1px solid red;
margin: 300px auto;
transform-style: preserve-3d;
-webkit-animation: rotate1 10s linear infinite;
-moz-animation: rotate1 10s linear infinite;
animation: rotate1 10s linear infinite;
}
.box img{width: 150px;height: 250px;border: 1px solid #ccc;position: absolute;
left: 0;top: 0;
-webkit-box-reflect: below 20px -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,0) 30%,rgba(250,250,250,0.5));
}
.img1{
-webkit-transform: translateZ(300px);
-moz-transform: translateZ(300px);
transform: translateZ(300px);
}
.img2{
-webkit-transform:rotateY(36deg) translateZ(300px) ;
-moz-transform:rotateY(36deg) translateZ(300px) ;
transform:rotateY(36deg) translateZ(300px) ;
}
.img3{
-webkit-transform:rotateY(72deg) translateZ(300px);
-moz-transform:rotateY(72deg)g) translateZ(300px) ;
transform:rotateY(72deg) (300px) ;
}
.img4{
-webkit-transform: rotateY(108deg) translateZ(300px);
-moz-transform:rotateY(108deg) translateZ(300px) ;
transform:rotateY(108deg) translateZ(300px) ;
}
.img5{
-webkit-transform: rotateY(144deg) translateZ(300px);
-moz-transform:rotateY(144deg) translateZ(300px) ;
transform:rotateY(144deg) translateZ(300px) ;
}
.img6{
-webkit-transform:rotateY(180deg) translateZ(300px) ;
-moz-transform:rotateY(180deg) translateZ(300px) ;
transform:rotateY(180deg) translateZ(300px) ;
}
.img7{
-webkit-transform:rotateY(216deg) translateZ(300px) ;
-moz-transform:rotateY(216deg) translateZ(300px) ;
transform: rotateY(216deg) translateZ(300px);
}
.img8{
-webkit-transform:rotateY(252deg) translateZ(300px) ;
-moz-transform:rotateY(252deg) translateZ(300px) ;
transform:rotateY(252deg) translateZ(300px) ;
}
.img9{
-webkit-transform:rotateY(288deg) translateZ(300px) ;
-moz-transform:rotateY(288deg) translateZ(300px) ;
transform:rotateY(288deg) translateZ(300px) ;
}
.img10{
-webkit-transform:rotateY(324deg) translateZ(300px) ;
-moz-transform:rotateY(324deg) translateZ(300px) ;
transform:rotateY(324deg) translateZ(300px) ;
}
@-moz-keyframes rotate1{
0%{
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
}
100%{
-webkit-transform: rotateY(360deg);
-moz-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
@-webkit-keyframes rotate1{
0%{
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
}
100%{
-webkit-transform: rotateY(360deg);
-moz-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
屏风相册
我打算二次修改
行，等大佬改完我来抄一份
不错，copy