关于网页前端的 transform动画

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <link rel="shortcut icon" href="img/mynote.ico"/>
        <link rel="stylesheet" type="text/css" href="css/reset.css" />
        <title>transform动画</title>
        <style type="text/css">
            #div1 {
                width: 300px;
                height: 300px;
                margin: 0 auto;
                position: relative;
                top: 100px;
                /*给予元素3d属性*/
                transform-style: preserve-3d;
                /*transform-origin 属性用来设置 transform 变换的基点位置。默认情况下,基点位置为元素的中心点*/
                transform-origin: 0 0 0;
                /*animation 属性是一个简写属性,用于设置六个动画属性 
    animation-name 动画名字
    animation-duration 动画持续时间
    animation-timing-function 动画的速度曲线(匀速为linear)
    animation-delay 动画开始之前的延迟
    animation-iteration-count 动画应该播放的次数(无数次为infinite)
    animation-direction 是否应该轮流反向播放动画(反向为alternate)*/
                animation: xuanZhuan 10s linear 2s infinite alternate;
            }
            
            #div1>img {
                position: absolute;
                top: 0;
            }
            
            #img1 {
                /*沿Z轴平移*/
                transform: translateZ(150px);
            }
            
            #img2 {
                transform: translateZ(-150px);
            }
            
            #img3 {
                /*沿X轴旋转*/
                transform: rotateX(90deg) translateZ(150px);
            }
            
            #img4 {
                transform: rotateX(-90deg) translateZ(150px);
            }
            
            #img5 {
                transform: rotateY(90deg) translateZ(150px);
            }
            
            #img6 {
                transform: rotateY(-90deg) translateZ(150px);
            }
            /*声明一个名字为 xuanzhuan 的动画*/
            
            @keyframes xuanZhuan {
                0% {
                    /*scale 缩放效果*/
                    transform: rotateY(0) rotateX(45deg) rotateZ(45deg) scale(0.5, 0.5) scaleZ(0.5);
                }
                50% {
                    transform: rotateY(180deg) rotateX(45deg) rotateZ(45deg) scale(2, 2) scaleZ(2);
                }
                100% {
                    transform: rotateY(360deg) rotateX(45deg) rotateZ(45deg) scale(0.5, 0.5) scaleZ(0.5);
                }
            }
        </style>
    </head>

    <body>
        <div id="div1">
            <img src="img/1.jpg" id="img1" />
            <img src="img/2.jpg" id="img2" />
            <img src="img/3.jpg" id="img3" />
            <img src="img/4.jpg" id="img4" />
            <img src="img/5.jpg" id="img5" />
            <img src="img/6.jpg" id="img6" />
        </div>
    </body>

</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值