3D动画属性及相关案例

最新推荐文章于 2024-08-15 11:09:11 发布

weixin_45671998

最新推荐文章于 2024-08-15 11:09:11 发布

阅读量105

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_45671998/article/details/114986921

版权

3D动画坐标图如上 在3这里插入图片描述

透视

perspective，透视可以将2D平面呈现出3D的效果。作为一个属性，设置给父元素，作用于所有3D转换的子元素。

3D呈现

transform-style：preserve-3d；使所有2D子元素呈现在3D的平面上。

旋转木马`

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./base.css">
</head>
<style>
    ul {
        width: 248px;
        height: 163px;
        position: relative;
        top: 170px;
        left: 42%;
        perspective: 5000px;
        transform-style: preserve-3d;
        animation: zhuan 5s infinite  linear;
        /* transform: rotateX(85deg); */

        
        
    }
    ul li{
        
        position: absolute;
       

    }
    ul:hover{
        animation-play-state: paused;
    }
    ul li:first-child{
        transform: translateZ(240px);
    }
    ul li:nth-child(2){
        transform: rotateY(60deg) translateZ(240px);
        /* transform: ; */
    }
    ul li:nth-child(3){
        transform: rotateY(300deg)  translateZ(240px);
        /* transform: ; */
    }
    ul li:nth-child(4){
        transform: rotateY(180deg) translateZ(240px);
        /* transform: ; */
    }
    ul li:nth-child(5){
        transform: rotateY(240deg) translateZ(240px);
        /* transform: ; */
    }
    ul li:nth-child(6){
        transform: rotateY(120deg) translateZ(240px);
        /* transform: ; */
    }
    @keyframes zhuan {
        100%{
            transform: rotateY(360deg);
        }
        
    }
</style>


<body>
    <ul>
        <li><img src="./images/recom_03.jpg"></li>
        <li><img src="./images/recom_03.jpg"></li>
        <li><img src="./images/recom_03.jpg"></li>
        <li><img src="./images/recom_03.jpg"></li>
        <li><img src="./images/recom_03.jpg"></li>
        <li><img src="./images/recom_03.jpg"></li> 
    </ul>

</body>

</html>

css样式

.pd{
    width: 100%;
    height: 300px;
    transform: all 3.2s ease;

}
.pd .pd1{
    width:153px ;
    height: 121px;
    animation: move01 15s linear infinite;

}
.pd .pd1 .pad1{
    width: 153px;
    height: 121px;
    background: url(./images/txgc_6d0e9e5.png);
    background-repeat: no-repeat;
    animation: play01  .4s steps(2) infinite;
}
@keyframes move01{
    0%{
        transform: translate(-200px,0);
    }
    100%{
        transform: translate(1920px,0);
    }
}
@keyframes play01{
    0%{
        background-position: 0 0;

    }
    100%{
        background-position: -308px 0;

    }
}

steps属性

animation: 动画名执行时间 steps（number position）次数；,
number 数值
把动画分为多少段
position
start
end

weixin_45671998

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3D动画属性及相关案例

3D动画坐标图如上透视perspective，透视可以将2D平面呈现出3D的效果。作为一个属性，设置给父元素，作用于所有3D转换的子元素。3D呈现transform-style：preserve-3d；使所有2D子元素呈现在3D的平面上。旋转木马`<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Comp
复制链接

扫一扫