图片的3D动画效果

最新推荐文章于 2025-08-13 20:25:32 发布

转载最新推荐文章于 2025-08-13 20:25:32 发布 · 155 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mina-huojian66/p/6293703.html

文章标签：

#php

本文介绍如何使用CSS3实现3D旋转动画效果。通过设置不同元素的动画时长和旋转轴，使得图片能够在X轴和Y轴上进行平滑的360度旋转。该教程适用于希望在网页中加入吸引眼球动画效果的前端开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：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>