3D旋转相册
*{
padding:0
margin:0
}
body,
html{
height:100%
}
/*背景图片在这里设置*/
body{
background-image:url("images/beijing.jpg")
background-size:100%100%
}
#box{
width:280px
height:400px
position:fixed
left:0
right:0
top:0
bottom:0
margin:auto
transform-style:preserve-3d
transform:rotateX(0deg)rotateY(0deg)
animation:go45slinearinfinite
}
#boximg{
width:280px
height:400px
position:absolute
left:0
top:0
}
#boximg:nth-child(1){
transform:rotateY(0deg)translateZ(650px)
}
#boximg:nth-child(2){
transform:rotateY(36deg)translateZ(650px)
}
#boximg:nth-child(3){
transform:rotateY(72deg)translateZ(650px)
}
#boximg:nth-child(4){
transform:rotateY(108deg)translateZ(650px)
}
#boximg:nth-child(5){
transform:rotateY(144deg)translateZ(650px)
}
#boximg:nth-child(6){
transform:rotateY(180deg)translateZ(650px)
}
#boximg:nth-child(7){
transform:rotateY(216deg)translateZ(650px)
}
#boximg:nth-child(8){
transform:rotateY(252deg)translateZ(650px)
}
#boximg:nth-child(9){
transform:rotateY(288deg)translateZ(650px)
}
#boximg:nth-child(10){
transform:rotateY(324deg)translateZ(650px)
}
@keyframesgo{
0%{
transform:rotateX(0deg)rotateY(0deg)
}
25%{
transform:rotateX(20deg)rotateY(180deg)
}
50%{
transform:rotateX(0deg)rotateY(360deg)
}
75%{
transform:rotateX(-20deg)rotateY(540deg)
}
100%{
transform:rotateX(0deg)rotateY(720deg)
}
}
images/1.jpg
images/2.jpg
images/3.jpg
images/4.jpg
images/5.jpg
images/6.jpg
images/7.jpg
images/8.jpg
images/9.jpg
images/10.jpg
以下是代码：
<!DOCTYPE html>
<html>
<head>
<title>transform-style实现Div的3D旋转-柯乐义</title>
<style>
*{font-size: 24pxcolor: #00ff00padding:0margin:0}
#container {
position: relative
height: 300px
width: 300px
-webkit-perspective: 500
margin-top: 200px
margin-right: auto
margin-left: auto
}
#parent-keleyi-com {
margin: 10px
width: 280px
height: 280px
background-color: #666
opacity: 0.3
-webkit-transform-style: preserve-3d
-webkit-animation: spin 15s infinite linear
}
#parent-keleyi-com >div {
position: absolute
top: 40px
left: 40px
width: 280px
height: 200px
padding: 10px
-webkit-box-sizing: border-box
}
#parent-keleyi-com >:first-child {
background-color: #000
-webkit-transform: translateZ(-100px) rotateY(45deg)
}
#parent-keleyi-com >:last-child {
background-color: #333
-webkit-transform: translateZ(50px) rotateX(20deg)
-webkit-transform-origin: 50% top
}
/*执行Y轴旋转360度动画*/
@-webkit-keyframes spin {
from {-webkit-transform: rotateY(0)}
to {-webkit-transform: rotateY(360deg)}
}
</style>
</head>
<body>
<div>请使用支持CSS3的浏览器<a href="http://keleyi.com/a/bjad/s89uo4t1.htm" target="_blank">原文</a></div>
<div id="container">
<div id="parent-keleyi-com">
<div><a href="/">柯乐义</a></div>
<div><a href="/">keleyi.com</a></div>
</div>
</div>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）