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. leetcode300. Longest Increasing Subsequence 最长递增子序列 、674. Longest Continuous Increasing Subsequence

    Longest Increasing Subsequence 最长递增子序列 子序列不是数组中连续的数. dp表达的意思是以i结尾的最长子序列,而不是前i个数字的最长子序列. 初始化是dp所有的都为1 ...

  2. pprint的惊喜

    因为我个人经常喜欢打印dir来看模块的方法,每次都是for循环换行,这个真好用 import pprint pprint.pprint (dir(pprint)) 执行下面的代码,会发现,没有自动换行 ...

  3. [整理记录备忘] Docker相关

    docker安装 linux上安装Docker(非常简单的安装方法) https://blog.csdn.net/qq_36892341/article/details/73918672 修改dock ...

  4. Exp6 信息收集与漏洞扫描 20164314

    一.实践目标 掌握信息搜集的最基础技能与常用工具的使用方法. 二.实践内容 1.各种搜索技巧的应用 2.DNS IP注册信息的查询 3.基本的扫描技术:主机发现.端口扫描.OS及服务版本探测.具体服务 ...

  5. Linux下gdb调试（tui）

    1 处于TUI模式的GDB 为了以TUI模式运行GDB,可以在调用GDB时在命令行上指定-tui选项,或者处于非TUI模式时在GDB中使用Ctrl+X+A组合键.如果当前处于TUI模式,后一种命令方式 ...

  6. js toFixed()方法的坑

    javascript中toFixed使用的是银行家舍入规则. 银行家舍入:所谓银行家舍入法,其实质是一种四舍六入五取偶(又称四舍六入五留双)法. 简单来说就是:四舍六入五考虑,五后非零就进一,五后为零 ...

  7. js怎样得出数组中某个数据最大连续出现的次数

     1:js怎样得出数组中某个数据最大连续出现的次数 var test=[1,2,3,3,2,2,2,3,3,3,3,5,3,3,3,3,3] ;    var j  = 0 ;    var max  ...

  8. Java编程基础知识总结大全（Ⅰ）

    Java是一门面向对象编程语言,不仅吸收了C++语言的各种优点,还摒弃了C++里难以理解的多继承.指针等概念,因此Java语言具有功能强大和简单易用两个特征.Java语言作为静态面向对象编程语言的代表 ...

  9. code#5 P2 棋子

    棋子   时间限制: 1.0 秒 空间限制: 512 MB 相关文件: 题目目录 题目描述 棋盘从左到右被分割成 n(n≤1000) 个格子,从左到右编号为1,2,...,n.棋盘上有 m(m≤n)  ...

  10. CentOS7进行OpenStack(queens)最小化部署实验出现的问题与解决过程

    注:此文为<OpenStack(queens)最小化搭建记录——控制与计算共两个节点>的补充 1.chrony时间同步服务搭建的时候,出现计算节点无法与控制节点同步.(controller ...