test.html：

<!DOCTYPE html>

<html>

<head> 
    <meta charset="utf-8" />

    <title>CSS3旋转木马</title>

    <link type="text/css" rel='stylesheet' href="test.css"></link>

</head>

<body>

    <div class="box">

        <div class="stage">

            <div></div>

            <div></div>

            <div></div>

            <div></div>

            <div></div>

            <div></div>

            <div></div>

        </div>

    </div>

</body>

</html>

test.css:

*{

    margin:;

    padding:;

}

.box{

    margin: 100px auto;

    perspective: 1000px;

}

.stage{

    margin: 0 auto;

    background: whitesmoke;

    position: relative;

    width: 200px;

    height: 100px;

    transform: rotateX(-8deg);

    transform-style: preserve-3d;

    animation: rot linear 6s infinite;

}

.stage div{

    position: absolute;

    width: 200px;

    height: 100px;

}

.stage div:nth-child(1){

    background-color: red;

    transform: rotateY(0deg) translateZ(350px);

}

.stage div:nth-child(2){

    background-color: orange;

    transform: rotateY(60deg) translateZ(350px);

}

.stage div:nth-child(3){

    background-color: yellow;

    transform: rotateY(120deg) translateZ(350px);

}

.stage div:nth-child(4){

    background-color: green;

    transform: rotateY(180deg) translateZ(350px);

}

.stage div:nth-child(5){

    background-color: blue;

    transform: rotateY(240deg) translateZ(350px);

}

.stage div:nth-child(6){

    background-color: blueviolet;

    transform: rotateY(300deg) translateZ(350px);

}

.stage div:nth-child(7){

    background-color: blanchedalmond;

    transform: rotateY(90deg);

}

@keyframes rot{

    from{transform: rotateX(-8deg) rotateY(0deg);}

    to{transform: rotateX(-8deg) rotateY(-360deg);}

}

效果图：

可以将颜色换成图片。

纯CSS3实现旋转木马的更多相关文章

  1. 纯css3艺术文字样式效果代码

    效果:http://hovertree.com/texiao/css3/1/ 本效果主要使用text-shadow实现.参考:http://hovertree.com/h/bjaf/css3_text ...

  2. 纯CSS3实现的一些酷炫效果

    之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...

  3. 纯css3圆形从中心向四周扩散动画效果

    查看效果:http://hovertree.com/texiao/css3/37/ 先来个简单的示例,例如: @keyframes hovertreemove{from {top:30px;}to { ...

  4. 纯css3 3D图片立方体旋转动画特效

    纯css3 3D立方体模块,鼠标触碰,模块炸开,大立方体中套小立方体 效果展示 手机扫描二维码体验效果: 效果图如下: 源码下载:http://hovertree.com/h/bjaf/0qmul8g ...

  5. 纯CSS3实现多层云彩变换飞行动画

    查看效果:http://hovertree.com/texiao/css3/4/效果2 效果图: 代码如下: <!doctype html> <html lang="zh& ...

  6. 纯css3手机页面图标样式代码

    全部图标:http://hovertree.com/texiao/css/19/ 先看效果: 或者点这里:http://hovertree.com/texiao/css/19/hoverkico.ht ...

  7. 纯CSS3实现动态火车行驶特效

    上次开完飞机,这次开火车 查看效果:http://hovertree.com/texiao/css3/7/ 效果图: 代码如下: <!DOCTYPE html> <html> ...

  8. [原创]纯CSS3打造的3D翻页翻转特效

    刚接触CSS3动画,心血来潮实现了一个心目中自己设计的翻页效果的3D动画,页面纯CSS3,目前只能在Chrome中玩,理论上可以支持Safari. 1. 新建HTML,代码如下(数据和翻页后的数据都是 ...

  9. 纯CSS3写的10个不同的酷炫图片遮罩层效果【转】

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...

随机推荐

  1. JNI由浅入深_6_简单对象的应用

    1.声明native方法 public class ComplexObject { /** * 返回一个对象数组 * @param val * @return */ public native Per ...

  2. POJ 1182 食物链（经典带权并查集 向量思维模式 很重要）

    传送门: http://poj.org/problem?id=1182 食物链 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: ...

  3. Boost noncopyable实现禁止拷贝的类

    在C++中定义一个类,如果不明确定义拷贝构造函数和拷贝赋值操作符,编译期会为我们自动生成这两个函数.但是我们有时又希望禁止拷贝类的实例,这时可以私有化拷贝构造函数和拷贝赋值操作符即可. class d ...

  4. mysql数据库的导入导出命令

    1.备份一个数据库 mysqldump -h localhosot -uroot -ppassword 数据库名>数据库所在路径(路径+数据库名.sql) 注意:导出的数据库文件.sql文件不能 ...

  5. 腾讯云的对象存储COS

    什么是对象存储COS Clound Object Storage,COS,专门为企业和开发者们提供能够存储海量的分布式存储服务,用户可以随时通过互联网对大量数据进行批量存储和处理,在任意位置存储和检索 ...

  6. 点击label执行两次的bug

    首先我是这样的写的: <label> <input type="checkbox">点击 </label> 无论点击input还是文字,都会执行 ...

  7. flAbsPath on /var/lib/dpkg/status failed 解决 Cydia 红字

    越狱之后抹掉所有数据,然后再使用 doubleH3lix 越狱成功后,打开 Cydia 会提示如下错误: flAbsPath on /var/lib/dpkg/status failed - real ...

  8. npm run build 时报错operation not permitted

    1.项目使用vue框架,在npm run build 打包时报错: 访问对应的目录,发现无法打开,原来是文件被其他应用程序占用了,仔细看了一下,xftp文件传输的软件打开着,把它关闭以后,重新运行np ...

  9. MongoDB DBA 实践3-----安装mongdb4.0发生错误

    在安装mongodb时,常常会出现一些错误,导致无法安装完全,下面则是各种错误与它们的解决方法: 1.在window机安装mongodb4.0, 其中的一种:由于缺失系统补丁,而导致无法完全安装,具体 ...

  10. PHP程序员的技术成长规划 第三阶段：高级阶段

    第三阶段:高级阶段 (高级PHP程序员)重点:除了基本的LNMP程序,还能够在某个方向或领域有深入学习.(纵深维度发展)目标:除了能够完成基本的PHP业务开发,还能够解决大部分深入复杂的技术问题,并且 ...