源代码：

<!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. openssl

    openssl genrsa -des3 -out server.key 1024openssl req -new server.key -out servr.csr seserver-fnamese ...

  2. Android中View的基础知识

    View的界限 View就是我们看到的界面,有四个界限范围分别是, Top/Left, Bottom/Right,坐标系从左上到右下.这四个值可以通过任何View的子类调用getTop()/get.. ...

  3. 多线程的学习与python实现

    学习了进程与线程,现对自己的学习进行记录. 目录: 一.进程与线程的概念,以及联系与区别 二.多线程 三.python中多线程的应用 四.python实例 五.参考文献 一.进程与线程的概念.以及联系 ...

  4. sja1000T can相关的知识

    开发环境:硬件环境arm9200 sja1000T,软件环境kernel version 2.6.21.驱动程序:字符驱动 can有两种基本的工作模式:basic can .pelican,pelic ...

  5. 两个APP跳转传值问题

    最近工作上遇到个问题,新的项目要和老系统单点登录. 有点蒙,从来没做过,网上一搜都是SSO,还需要验证服务器. 仔细揣摩,其实需求很简单,没必要那么复杂,以下是我的需求和解决方案: 原系统AP1 新开 ...

  6. VMware下利用ubuntu13.04建立嵌入式开发环境之五

    tftp和nfs服务器配置 一.tftp服务器配置 1.安装软件包 1.1安装服务 apt-get install tftpd-hpa 1.2安装客户端 apt-get install tftp-hp ...

  7. Java_DOM创建XML

    import java.io.FileInputStream;import java.io.FileNotFoundException;import java.io.FileOutputStream; ...

  8. 《嫌疑人X的献身》书评

    <嫌疑人X的献身>是日本著名推理小说作家东野圭吾的代表作之一.1985年东野圭吾以一本<放学后>出道,出道初期善于写精巧细致的本格推理,后期文笔愈发老辣.简练.2005年东野圭 ...

  9. 将本地代码上传至github备份的操作方法

    这篇文章写得是windows下的使用方法. 第一步:创建Github新账户 第二步:新建仓库 第三步:填写名称,简介(可选),勾选Initialize this repository with a R ...

  10. 移动测试主要使用的测试框架，基于python

    1.uiautomator google自己的测试框架,可以跨应用测试, 语言支持java,python也可以在GitHub上找到封装的包,去调用uiautomator. 2.Robotium jav ...