分别实现图片沿着XYZ轴旋转的动画

时间：2020-05-17 09:53:20 阅读：60 评论：0 收藏：0 [点我收藏+]

<!doctype html>
<html charset="utf-8">
<head>
<link rel="dns-prefetch" href="http://i.tq121.com.cn">
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>实现3D旋转</title>
<meta http-equiv="Content-Language" content="zh-cn">

<meta name="keywords" content="关键词,关键词,..." />
<meta name="description" content="关键词,关键词,..." />
<style type="text/css">

/* 实现3D旋转，兼容性暂时不考虑 */
/* 实现捆绑 myrotateX*/
@keyframes myrotateX
{
 0% {
        /* 实现角度变化*/
        transform: rotateX(0deg);
    }

    12.5%{
       /* 实现角度变化*/
        transform: rotateX(45deg);
    }

    25%  {
       /* 实现角度变化*/
        transform: rotateX(90deg);
    }

    37.5%{
       /* 实现角度变化*/
        transform: rotateX(135deg);
    }

    50% {
       /* 实现角度变化*/
        transform: rotateX(180deg);
    }
    62.5% {
       /* 实现角度变化*/
        transform: rotateX(225deg);
    }
    75% {
       /* 实现角度变化*/
        transform: rotateX(270deg);
    }
    87.5% {
       /* 实现角度变化*/
        transform: rotateX(315deg);
    }
    100% {
       /* 实现角度变化*/
        transform: rotateX(360deg);
    }
}
#divX
{
animation: myrotateX 30s both infinite;
width:400px;
height:400px;
}

/* 实现捆绑 myrotateY*/
@keyframes myrotateY
{
 0% {
        /* 实现角度变化*/
        transform: rotateY(0deg);
    }

    25%  {
       /* 实现角度变化*/
        transform: rotateY(90deg);
    }
    50%{
       /* 实现角度变化*/
        transform: rotateY(180);
    }

    75% {
       /* 实现角度变化*/
        transform: rotateY(270deg);
    }
    100% {
       /* 实现角度变化*/
        transform: rotateY(360deg);
    }
}
#divY
{
animation: myrotateY 30s both infinite;
width:400px;
height:400px;
}

/* 实现捆绑 myrotateZ*/
@keyframes myrotateZ
{
 0% {
        /* 实现角度变化*/
        transform: rotateZ(0deg);
    }

    25%  {
       /* 实现角度变化*/
        transform: rotateZ(90deg);
    }
    50%{
       /* 实现角度变化*/
        transform: rotateZ(180);
    }

    75%,85% {
       /* 实现角度变化*/
        transform: rotateZ(270deg);
    }
    100% {
       /* 实现角度变化*/
        transform: rotateZ(360deg);
    }
}
#divZ
{
animation: myrotateZ 30s both infinite;
width:400px;
height:400px;
}


}
</style>
</head>
<body>
<div id="divX"><img width="400" height="300" src="C:\Users\macbook\Desktop\1.jpg"/>X</div>

<div id="divY"><img width="400" height="300" src="C:\Users\macbook\Desktop\1.jpg"/>Y</div>

<div id="divZ"><img width="400" height="300" src="C:\Users\macbook\Desktop\1.jpg"/>Z</div>

</body>
</html>

View Code

分别实现图片沿着XYZ轴旋转的动画

原文：https://www.cnblogs.com/ciscolee/p/12903674.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)