滚动的轮子案例

简介: 滚动的轮子案例

使用tranform进行展示


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 1200px;
            height: 200px;
            background-color: skyblue;
        }
        img {
            height: 100%;
            transition: all 5s;
        }
        div:hover img {
            transform: translate(800px) rotate(360deg);
        }
    </style>
</head>
<body>
    <div>
        <img src="./images/tyre.png" alt="">
    </div>
</body>
</html>


相关文章
|
7月前
|
前端开发 图形学
Unity精华☀️UI和物体可见性的判断方法
Unity精华☀️UI和物体可见性的判断方法
|
7月前
|
图形学
Unity动画☀️Unity动画系统Bug集合
Unity动画☀️Unity动画系统Bug集合
|
7月前
|
JavaScript 调度
Three.js开发秘籍:FlyControls的拖拽视角问题解决方案
Three.js开发秘籍:FlyControls的拖拽视角问题解决方案
96 0
|
10月前
|
前端开发 JavaScript
THREE实战1_代码重构点、线、面
THREE实战1_代码重构点、线、面
60 1
|
10月前
|
监控 Linux Windows
装备神器edex-ui别人以为我很屌其实我只会if和else搬运代码
装备神器edex-ui别人以为我很屌其实我只会if和else搬运代码
98 1
|
机器学习/深度学习 算法 图形学
Unity小游戏——无限滚动的背景的改良
Unity小游戏——无限滚动的背景的改良
145 0
|
C语言
C项目(贪吃蛇BUG解决及功能扩展)
C项目(贪吃蛇BUG解决及功能扩展)
195 0
|
前端开发 JavaScript
THREE实战_代码重构点、线、面(酷)
THREE实战_代码重构点、线、面
92 0
THREE实战_代码重构点、线、面(酷)
|
JavaScript 前端开发
jquery 展开收缩改变状态 保姆式教学代码,默认第二项展开
jquery 展开收缩改变状态 保姆式教学代码,默认第二项展开
|
设计模式
别再写满屏的爆爆爆炸类了,试试装饰器模式,这才是优雅的方式!!(1)
别再写满屏的爆爆爆炸类了,试试装饰器模式,这才是优雅的方式!!(1)
178 0
别再写满屏的爆爆爆炸类了,试试装饰器模式,这才是优雅的方式!!(1)