源代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
    body{
transform-style: preserve-3d;
    background-image: radial-gradient(yellow,pink)

}
        .outer{
            width: 200px;
            height: 300px;
/*            border:1px solid green;*/
            position: relative;
            margin:100px auto;
            transform: rotateY(10deg) rotateX(30deg);
            transform-style: preserve-3d;
            /*transform: rotateX(-38deg)rotateY(-35deg) ;*/
            animation: mofang 7s linear infinite;
        }
        @keyframes mofang{
            from{
                transform:rotateX(0deg) rotateY(10deg);

}
            to{
                transform:rotateY(360deg)rotateX(10DEG);
            }
        }
        .inner{
            width: 200px;
            height: 300px;
            border:2px solid red;
            position: absolute;
        }
        .inner:nth-child(1){
            transform: translateZ(308PX);
        }
        .inner:nth-child(2){
            transform: translateZ(-308PX);
        }
        .inner:nth-child(3){
            transform: rotateY(36deg)translateZ(310PX);
        }
        .inner:nth-child(4){
            transform: rotateY(36deg)translateZ(-310PX);
        }
        .inner:nth-child(5){
            transform: rotateY(72deg)translateZ(310PX);
        }
        .inner:nth-child(6){
            transform: rotateY(72deg)translateZ(-310PX);
        }
        .inner:nth-child(7){
            transform: rotateY(108deg)translateZ(310PX);
        }
        .inner:nth-child(8){
            transform: rotateY(108deg)translateZ(-310PX);
        }
        .inner:nth-child(9){
            transform: rotateY(144deg)translateZ(310PX);
        }
        .inner:nth-child(10){
            transform: rotateY(144deg)translateZ(-308PX);
        }
        h2{
            color: orange;
        }
    </style>
</head>
<body>
<marquee scrollamount="5">
<h2>
《多幸运》
词:刘家泽

曲:胜屿

演唱：韩安旭

在亿万人海相遇

有同样默契

是多么不容易

你懂得我的固执

我懂你脾气

两颗心在靠近

等不及解释我的心情

怕错过爱上你的时机

浪漫已经 准备就绪

全新的旅行

多幸运

在最美的年纪

遇见你

没有遗憾和可惜

抱紧你

用尽全部力气

不让幸福逃离

多幸运

爱你这件事情

成为我

今生最对的决定

我相信

你就是那唯一

愿陪你到底

多幸运 遇见了你

多幸运 爱上了你

多幸运 能在一起

多幸运 遇见了你

多幸运 爱上了你

多幸运 能在一起

在亿万人海相遇

有同样默契

是多么不容易

你懂得我的固执

我懂你脾气

两颗心在靠近

等不及解释我的心情

怕错过爱上你的时机

浪漫已经 准备就绪

全新的旅行

多幸运

在最美的年纪

遇见你

没有遗憾和可惜

抱紧你

用尽全部力气

不让幸福逃离

多幸运

爱你这件事情

成为我

今生最对的决定

我相信

你就是那唯一

愿陪你到底

多幸运 遇见了你

多幸运 爱上了你

多幸运 能在一起

多幸运 遇见了你

多幸运 爱上了你

多幸运 能在一起

多幸运

在最美的年纪

遇见你

没有遗憾和可惜

抱紧你

用尽全部力气

不让幸福逃离

多幸运

爱你这件事情

成为我

今生最对的决定

我相信

你就是那唯一

愿陪你到底 </h2></marquee>
<audio src="http://wl.baidu190.com/1465095357/fbef26cbf77c7072a34ba1dd074e889b.mp3" autoplay loop="loop"></audio>
<div class="outer">
    <div class="inner"><img src="1.jpg" width="200px" height="300px"></div>
    <div class="inner"><img src="2.jpg" width="200px" height="300px"></div>
    <div class="inner"><img src="3.jpg" width="200px" height="300px"></div>
    <div class="inner"><img src="4.jpg" width="200px" height="300px"></div>
    <div class="inner"><img src="5.jpg" width="200px" height="300px"></div>
    <div class="inner"><img src="6.jpg" width="200px" height="300px"></div>
    <div class="inner"><img src="7.jpg" width="200px" height="300px"></div>
    <div class="inner"><img src="8.jpg" width="200px" height="300px"></div>
    <div class="inner"><img src="9.jpg" width="200px" height="300px"></div>
    <div class="inner"><img src="10.jpg" width="200px" height="300px"></div>

</div>

</body>
</html>

静态截图《想侧面添加图片的，把准备好的图片插入源代码相应位置就ok啦》：

小制作-css+html旋转木马的更多相关文章

  1. Flexbox制作CSS布局实现水平垂直居中

    Flexbox实现一个div元素在body页面中水平垂直居中: <!DOCTYPE html><html lang="en"><head>  & ...

  2. 小tip:CSS vw让overflow:auto页面滚动条出现时不跳动——张鑫旭

    小tip:CSS vw让overflow:auto页面滚动条出现时不跳动 这篇文章发布于 2015年01月25日,星期日,23:08,归类于 css相关. 阅读 46274 次, 今日 91 次 by ...

  3. 鼠标悬浮上去显示小手CSS

    鼠标悬浮上去显示小手CSS只需要添加一句css代码即可 cursor:pointer;

  4. 小tip:CSS vw让overflow:auto页面滚动条出现时不跳动

    原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水平居中布局,主体定个宽 ...

  5. 【Unity 3D】学习笔记29：游戏的例子——简单的小制作地图

    无论学习.只看不练是坏科学. 因此,要总结回想这怎么生产MMROPG小地图的游戏.于MMROPG游戏类,在游戏世界中行走时导致各地,通常在屏幕的右上角,将有一个区域,以显示当前的游戏场景微缩.在游戏世 ...

  6. 【js 编程艺术】小制作一

    最近在看js编程艺术,照葫芦画瓢,做了一个小网页.作为一枚前端渣渣,遇到了好多坑,在这里就不提了. 首先是html代码 /*gallery.html*/<!DOCTYPE html> &l ...

  7. 在线制作css动画——cssanimate

    熟悉CSS的人都知道,CSS可以实现很多漂亮的动画,特别是它的在线功能,能够帮助人们解决很多制作动画的效果.今天特别推荐一个在线CSS插件功能--cssanimate,这个最大的特色就是以图形界面方式 ...

  8. 一个好玩的小制作，以及在<a/>中的标签href="javascript:;"/href="javascript:void(0);"/href="javascript:"的用法

    一:一个小图标的制作 我们在支付宝.微信等某些地方上传文件时会遇到以下的图标,但是这样的图标其实可以用<a/>标签以及css样式完成, 具体代码如下: <!DOCTYPE html& ...

  9. 在线制作css动画——CSS animate

    熟悉CSS的人都知道,CSS可以实现很多漂亮的动画,特别是它的在线功能,能够帮助人们解决很多制作动画的效果.今天特别推荐一个在线CSS插件功能——cssanimate,这个最大的特色就是以图形界面方式 ...

随机推荐

  1. BroadCast Receiver的使用

    定义 广播接收器分为标准广播和有序广播,标准广播是异步执行的广播,有序广播是同步执行的,同一时刻只有一个广播接收器会收到广播,执行结束后,广播才会继续传递. 静态注册 在Androidmanifest ...

  2. Android - 设置TextView的字体行间距 - TextView

    xml文件中给TextView添加: android:lineSpacingExtra="10dp"// 行间距 android:lineSpacingMultiplier=&qu ...

  3. SpringMVC与MyBatis整合（一）——查询人员列表

    从今天开始,一点点的记录做毕设和学习的过程. 寒假才开始接触SpringMVC和MyBatis,之前对框架的概念理解并不到位,也没学过Spring.目前学习起来思路并不很清晰,有些东西我还不能理解,只 ...

  4. 当在浏览器输入一个url访问后发生了什么

    首先根据DNS获取该url的ip地址,ip地址的获取可能通过本地缓存,路由缓存等得到. 然后在网络层通过路由选择查找一条可达路径,最后利用tcp/ip协议来进行数据的传输. 其中在传输层将信息添加源端 ...

  5. STM32时钟数

    在STM32中,有五个时钟源,为HSI.HSE.LSI.LSE.PLL. 其实是四个时钟源,如下图所示(灰蓝色),PLL是由锁相环电路倍频得到PLL时钟. ①.HSI是高速内部时钟,RC振荡器,频率为 ...

  6. Informatica Lookup Transformation组件的Connect 与Unconnected类型用法

    Informatica Lookup Transformation组件的Connect 与Unconnected类型用法及区别:下面是通一个Lookup在不同Mapping中的使用: 1. Conne ...

  7. Object类clone方法的自我理解

    网上搜帖: clone()是java.lang.Object类的protected方法,实现clone方法: 1)类自身需要实现Cloneable接口 2)需重写clone()方法,最好设置修饰符mo ...

  8. 《2---关于JDBC编程过程中驱动配置问题》

    说明:我在Editplus中编写了一个简单的JDBC程序,用来测试是否和数据库连接正确.读者如有其它疑问,可以留言交流. [1]程序如下: import java.sql.*; public clas ...

  9. 初识reactJs 相关

           喽了一眼阮一峰老师的react文章,感觉写的挺棒,这篇只是按照自己思路屡一遍,纯属自学笔记,不承担社会暴乱责任.前几天,打算学vuejs,师兄给了一句话的点播,感觉很醍醐灌顶.总结下,所 ...

  10. eclipse + marven

    eclipse使用maven管理项目,可以自动下载依赖包(尤其是容易引起依赖包冲突的场合),也可以实现打jar包,编译等功能 1  eclipse安装maven插件 使用Eclipse--help-- ...