⽤html制作3d旋转正⽅形相册
⽤html制作3d旋转正⽅体相册
⾸先给⼤家看看效果图：动态效果，就接了⼏张图⽚给⼤家看
做这个实验最主要的就是⽤到了HTML5的动画的 animation 属性和@keyframes规则
说先看看keyframers的规则语法定义：
@ keyframes animationname{
kkeyframes-selector{}
}
animation的属性书写语法如下：
animation ：name duration timing-function delay iteration-count direction fillmode paly-state;
还⽤到了⼀些CSS3变形效果3D的转换，在这⾥就不⼀⼀说了，上⼀个博客已经写过了；主要提⼀下要呈现 3D的效果必须要⽤到perspective属性的透视效果就是⽤于是实现视觉上的3D效果;
话不多说看代码html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3d</title>
<style>
body{
margin: 0;
padding: 0;
background-color: wheat;
}
.one{width: 300px;
height: 300px;
height: 300px;
text-align: center;
margin: 150px auto;
position: relative;
perspective: 3000px;
transform-style: preserve-3d;
opacity: 1;
transform:rotateX(-30deg)rotateY(30deg);
animation: run 10s linear 0s infinite;
}
rotate属性div{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
opacity: 0.9;
}
@keyframes  run{
0%{
transform:rotate(0deg)rotateX(0deg);
}
100%{
transform:rotate(360deg)rotateX(360deg);
}
}
.one :nth-child(1){
/*        background-color: hotpink;*/
transform:translateZ(150px);
}
.one :nth-child(2){
/*  background-color: darkgreen;*/
transform:rotateY(90deg)translateZ(150px);
}
.one :nth-child(3){
/*    background-color:green ;*/
transform:rotateY(90deg)translateZ(-150px);
}
.one :nth-child(4){
/*  background-color: darkblue;*/
transform:rotateX(90deg)translateZ(150px);
}
.one :nth-child(5){
/*  background-color: yellow;*/
transform:rotateX(90deg)translateZ(-150px); }
.one :nth-child(6){
/* background-color: darkred;*/
transform:translateZ(-150px);
}
img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="one">
<div><img src="zhangyixing2.jpg" alt=""></div>        <div><img src="zhangyixing3.jpg" alt=""></div>        <div><img src="zhangyixing4.jpg" alt=""></div>        <div><img src="zhangyixing5.jpg" alt=""></div>        <div><img src="zhangyixing6.jpg" alt=""></div>        <div><img src="zhangyixing1.gif" alt=""></div>    </div>
</body>
</html>
在上述实验中⽤到了⼏张图⽚：