图片的3D动画效果
效果：http://runjs.cn/code/tph94zja
DOCTYPE>
<html>
<head><meta charset=utf-8" /><title>CSS3 实现的3D动画效果title><style type="text/css">#animate_3d img{float:left;}#animate_3d{width:500px; overflow:hidden;-webkit-perspective:600px; /* 光源设置为离页面200像素的位置 */-webkit-transform-style:preserve-3d; /* 光源设置为离页面200像素的位置 */-webkit-animation-name:x-spin;/*动画名称*/-webkit-animation-duration:7s;/*动画持续时间*/-webkit-animation-iteration-count:1;/*动画播放次数infinite 无限次*/-webkit-animation-timing-function:linear;/*从开始到结束以什么样的速度播放动画*//*linear 动画从头到尾的速度是相同的。 *//*ease 默认。动画以低速开始，然后加快，在结束前变慢。 *//*ease-in 动画以低速开始。 *//*ease-out 动画以低速结束。 *//*ease-in-out 动画以低速开始和结束。 *//*cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。(数值越小，速度越快)*/}img,#animate_3d>div{-webkit-transform-style:preserve-3d;-webkit-animation-iteration-count:1;-webkit-animation-timing-function:linear;}#animate_line_1{-webkit-animation-name:y-spin;-webkit-animation-duration:5s;}#animate_line_2{-webkit-animation-name:y-spin;-webkit-animation-duration:4s;}#animate_line_3{-webkit-animation-name:y-spin;-webkit-animation-duration:3s;}/*关键帧*/@-webkit-keyframes x-spin {0% { -webkit-transform:rotateX(0deg); }50% { -webkit-transform:rotateX(180deg); }100% { -webkit-transform:rotateX(360deg); }}@-webkit-keyframes y-spin {0% { -webkit-transform:rotateY(0deg); }50% { -webkit-transform:rotateY(180deg); }100% { -webkit-transform:rotateY(360deg); }}style>
head><body>
<div id="animate_3d"><div id="animate_line_1"><img src="image/3d/ps1.jpg" /><img src="image/3d/ps2.jpg" /><img src="image/3d/ps3.jpg" /><img src="image/3d/ps4.jpg" /><img src="image/3d/ps5.jpg" />div><div id="animate_line_2"><img src="image/3d/ps6.jpg" /><img src="image/3d/ps7.jpg" /><img src="image/3d/ps8.jpg" /><img src="image/3d/ps9.jpg" /><img src="image/3d/ps10.jpg" />div><div id="animate_line_3"><img src="image/3d/ps11.jpg" /><img src="image/3d/ps12.jpg" /><img src="image/3d/ps13.jpg" /><img src="image/3d/ps14.jpg" /><img src="image/3d/ps15.jpg" />div>
div>
body>
html> 参照：http://www.zhangxinxu.com/wordpress/?p=565
转载于:https://www.cnblogs.com/mina-huojian66/p/6293703.html
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！