css3相册图片3D旋转展示特效

最新推荐文章于 2022-04-28 16:09:06 发布

xiaozhen0610

最新推荐文章于 2022-04-28 16:09:06 发布

阅读量676

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_hj2221b0jchj.html

版权

前端专栏收录该内容

844 篇文章 0 订阅

订阅专栏

查看效果：http://hovertree.com/texiao/css/14/

本效果用css3的animation实现动画

定义和用法
animation 属性是一个简写属性，用于设置六个动画属性：
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

默认值： none 0 ease 0 1 normal
继承性： no
版本： CSS3
JavaScript 语法： object.style.animation="movehovertree 5s infinite"

语法
animation: name duration timing-function delay iteration-count direction;

animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。

示例：http://hovertree.com/texiao/css/14/1.htm

图片旋转代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3女神来袭 - 何问起</title>
<style>
body {
margin: 0;
background: #000;
}

#wrap {
width: 300px;
height: 400px;
position: relative;
margin: 100px auto;
-webkit-perspective: 3000px;
-moz-perspective: 3000px;
-ms-transform: perspective(3000px);
-ms-perspective: 3000px;
}

#head {
width: 100%;
height: 100%;
position: absolute;
-webkit-transform-style: preserve-3d;
-webkit-animation: donghua 15s linear 0s infinite;
-moz-transform-style: preserve-3d;
-moz-animation: donghua 15s linear 0s infinite;
-ms-transform-style: preserve-3d;
-ms-animation: donghua 25s linear 0s infinite;
}

#head div {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 400px;
border: 1px solid red;
text-align: center;
line-height: 100px;
}

#head div:nth-child(1) {
-webkit-transform: rotateY(0deg) translateZ(400px);
-moz-transform: rotateY(0deg) translateZ(400px);
-ms-transform: rotateY(0deg) translateZ(400px);
background: url(http://hovertree.com/texiao/css/14/hovertreepic/01.jpg);
background-size: cover;
}

#head div:nth-child(2) {
-webkit-transform: rotateY(36deg) translateZ(500px);
-moz-transform: rotateY(36deg) translateZ(500px);
-ms-transform: rotateY(36deg) translateZ(500px);
background: url(http://hovertree.com/texiao/css/14/hovertreepic/02.jpg);
background-size: cover;
}

#head div:nth-child(3) {
-webkit-transform: rotateY(72deg) translateZ(400px);
-moz-transform: rotateY(72deg) translateZ(400px);
-ms-transform: rotateY(72deg) translateZ(400px);
background: url(http://cms.hovertree.com/hvtimg/201511/9rour12a.jpg);
background-size: cover;
}

#head div:nth-child(4) {
-webkit-transform: rotateY(108deg) translateZ(500px);
-moz-transform: rotateY(108deg) translateZ(500px);
-ms-transform: rotateY(108deg) translateZ(500px);
background: url(http://hovertree.com/texiao/css/14/hovertreepic/04.jpg);
background-size: cover;
}

#head div:nth-child(5) {
-webkit-transform: rotateY(144deg) translateZ(400px);
-moz-transform: rotateY(144deg) translateZ(400px);
-ms-transform: rotateY(144deg) translateZ(400px);
background: url(http://hovertree.com/texiao/css/14/hovertreepic/05.jpg);
background-size: cover;
}

#head div:nth-child(6) {
-webkit-transform: rotateY(180deg) translateZ(500px);
-moz-transform: rotateY(180deg) translateZ(500px);
-ms-transform: rotateY(180deg) translateZ(500px);
background: url(http://hovertree.com/texiao/css/14/hovertreepic/06.jpg);
background-size: cover;
}

#head div:nth-child(7) {
-webkit-transform: rotateY(216deg) translateZ(400px);
-moz-transform: rotateY(216deg) translateZ(400px);
-ms-transform: rotateY(216deg) translateZ(400px);
background: url(http://hovertree.com/texiao/css/14/hovertreepic/07.jpg);
background-size: cover;
}

#head div:nth-child(8) {
-webkit-transform: rotateY(252deg) translateZ(500px);
-moz-transform: rotateY(252deg) translateZ(500px);
-ms-transform: rotateY(252deg) translateZ(500px);
background: url(http://hovertree.com/texiao/css/14/hovertreepic/08.jpg);
background-size: cover;
}

#head div:nth-child(9) {
-webkit-transform: rotateY(288deg) translateZ(400px);
-moz-transform: rotateY(288deg) translateZ(400px);
-ms-transform: rotateY(288deg) translateZ(400px);
background: url(http://hovertree.com/hvtimg/201511/6j9j6tk5.png);
background-size: cover;
}

#head div:nth-child(10) {
-webkit-transform: rotateY(324deg) translateZ(500px);
-moz-transform: rotateY(324deg) translateZ(500px);
-ms-transform: rotateY(324deg) translateZ(500px);
background: url(http://cms.hovertree.com/hvtimg/201512/wfevf6yh.jpg);
background-size: cover;
}

@-webkit-keyframes donghua {
0% {
transform: rotateX(5deg) rotateY(360deg);
}

50% {
transform: rotateX(-5deg) rotateY(180deg);
}

100% {
transform: rotateX(5deg) rotateY(0deg);
}
}

@-moz-keyframes donghua {
0% {
transform: rotateY(10deg) rotateY(0deg);
}

50% {
transform: rotateY(-10deg) rotateY(180deg);
}

100% {
transform: rotateY(10deg) rotateY(360deg);
}
}

@-ms-keyframes donghua {
0% {
transform: rotateY(10deg) rotateY(0deg);
}

50% {
transform: rotateY(-10deg) rotateY(180deg);
}

100% {
transform: rotateY(10deg) rotateY(360deg);
}
}a{color:white}
</style>
</head>
<body>

<div id="wrap">
<div id="head">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div><div style="margin:0px auto;text-align:center;width:736px">
<h2>图片立体旋转</h2><a href="http://hovertree.com/">首页</a> <a href="http://hovertree.com/texiao/">特效</a>
<a href="http://hovertree.com/h/bjaf/a6598spx.htm">原文</a>
  <a href="http://hovertree.com/texiao/css/14/1.htm">Demo 2</a></div>
</body>
</html>

xiaozhen0610

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3相册图片3D旋转展示特效

查看效果：http://hovertree.com/texiao/css/14/本效果用css3的animation实现动画定义和用法animation 属性是一个简写属性，用于设置六个动画属性：animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-direction注释：请始终规定 animation-duration 属性，否则时长为 0，就不会
复制链接

扫一扫