3D相册

最新推荐文章于 2024-09-12 18:02:32 发布

無羁

最新推荐文章于 2024-09-12 18:02:32 发布

阅读量142

点赞数

分类专栏： JS 文章标签： html css

本文链接：https://blog.csdn.net/w_run/article/details/114968178

版权

JS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.旋转相册

<!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="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>

2.旋转魔方：

<!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>