最近看一下css3d的一些特性，想着也实验学习一下，制作个小demo之类的。就练习了一下。开发一个粗糙的选择木马效果，如图

其实就是找到角度和位置，计算每根柱子的旋转角度摆放到3d空间的置顶位置即可。然后利用css的animate属性让3d舞台无线旋转，就有了一简易的旋转木马效果。感兴趣的可以看一下，可以把代码中的图片路径改为自己的图片地址就行了。直接可用。

代码如下：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        .box{

            width:800px;

            height: 600px;

            margin:0px auto;

        }

        .box .stage{

            perspective:0px;

            perspective-origin: center center;

        }

        .box .stage .container{

            transform-style: preserve-3d;

        }

        .box ul,.box li{

            list-style: none;

            margin:0px;

            padding:0px;

            text-align: center;

            font-weight: bold;

        }

        .box ul{

            margin-left:200px;

            width:400px;

            height:400px;

        }

        .box li{

            position: absolute;

            margin-left:200px;

            width:10px;

            height:300px;

            background: blue;

            color:red;

            transform-origin: 5px top;

        }

        .box li> .horse{

            width:100px;

            height:100px;

            position: absolute;

            top:298px;

            left:-55px;

            border-radius: 50px;

            background-image: url("horse.jpg");

            background-size: contain;

        }

        .box ul{

            animation: run 20s linear infinite;

        }

        @-webkit-keyframes run {

            0%{

                transform: rotateY(0deg);

            }

            100%{

                transform: rotateY(360deg);

            }

        }

        @-webkit-keyframes horserun {

            0%{

                transform: translateY(0px);

            }

            100%{

                transform: translateY(50px);

            }

        }

    </style>

    <script src="js/jquery-1.11.2.js"></script>

    <script>

        $(function(){

            var len=$(".container>li").length;

            $(".container>li").each(function(e){

                var index=$(".container>li").index(this)+1;

                $(this).css({

                   "transform":"rotateY("+360/len * index+"deg) skew(60deg)"

                });

            });

        })

    </script>

</head>

<body>

<div class="box">

    <div class="stage">

        <ul class="container">

            <li class="horse1">

                <div class="horse"></div>

            </li>

            <li style="background: orange">

                <div class="horse"></div>

            </li>

            <li style="background: #ffff00">

                <div class="horse"></div>

            </li>

            <li style="background: green">

                <div class="horse"></div>

            </li>

            <li style="background: blue">

                <div class="horse"></div>

            </li>

            <li style="background:lightskyblue ">

                <div class="horse"></div>

            </li>

            <li style="background: purple">

                <div class="horse"></div>

            </li>

            <li style="background: black">

                <div class="horse"></div>

            </li>

        </ul>

    </div>

</div>

</body>

</html>

学习css3d的试验demo，觉得好玩就练习一下。。。

感谢阅读。。。

利用CSS3D效果制作简易旋转木马效果的更多相关文章

  1. 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果

    原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...

  2. WPF设置VistualBrush的Visual属性制作图片放大镜效果

    原文:WPF设置VistualBrush的Visual属性制作图片放大镜效果 效果图片:原理:设置VistualBrush的Visual属性,利用它的Viewbox属性进行缩放. XAML代码:// ...

  3. 【前端】javascript+jQuery实现旋转木马效果轮播图slider

    实现效果: 实现原理: 技术栈: javascript+jQuery+html+css 实现步骤: // 0. 获取元素 // 1. 鼠标放置到轮播图上,显示两侧的控制按钮,移开后隐藏 // 2. 为 ...

  4. CorelDRAW快速制作闪耀钻石项链效果

    今天小编为大家分享使用CorelDRAW快速制作闪耀钻石项链效果,过程并不是很复杂,主要用到刻刀工具.智能填充和渐变色的应用,待到一个角完成之后会走一点点捷径,利用旋转复制的方法做出完整的钻石效果,最 ...

  5. 学习使用 jQuery & CSS3 制作照片堆栈效果

    在这个小实验中,我们使用 jQuery & CSS3 创建了一个交互式的照片堆栈效果.提供了一些模拟现实的互动的可能性给用户.这个想法的思路是:有一些照片在桌面上可以拖放一样,堆放和删除,每个 ...

  6. 3D Grid Effect – 使用 CSS3 制作网格动画效果

    今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的​​.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...

  7. 10个实用的 CSS3 按钮效果制作教程

    人们往往喜欢那些有更多互动元素的网站,因此现在很多设计师专注于他们的 CSS3 技能.这是因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这里分享的10个优秀的 CSS3 按钮效果制作 ...

  8. 酷！使用 jQuery & Canvas 制作相机快门效果

    在今天的教程中,我们将使用 HTML5 的 Canvas 元素来创建一个简单的摄影作品集,它显示了一组精选照片与相机快门的效果.此功能会以一个简单的 jQuery 插件形式使用,你可以很容易地整合到任 ...

  9. 如何使用 HTML5 Canvas 制作水波纹效果

    今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...

随机推荐

  1. Design6：选择合适的数据类型

    数据库使用Table来存储海量的数据,细分Table结构,数据最终存储在Table Column中,因此,在设计Table Schema时,必须慎重选择Table Column的Data Type,数 ...

  2. OLE DB Command transformation 用法

    OLE DB Command transformation component 能够引用参数,逐行调用sqlcommand,This transformation is typically used ...

  3. C#设计模式系列：迭代器模式（Iterator）

    迭代器模式把对象的职责分离,职责分离可以最大限度减少彼此之间的耦合程度,从而建立一个松耦合的对象.职责分离的要点是对被分离的职责进行封装,并以抽象的方式建立彼此之间的关系. 1.迭代器模式简介 1.1 ...

  4. Npoi导出Excel 实战篇（Webform）

    开篇语 废话不多说,直接上遇到的问题 需求:在这个界面点击导出,导出页面数据,苦于没有做过webfrom项目,弄了半天还是没想到原生态的好方法,所以在网上看了下有没有导出的好例子,结果发现有人推荐使用 ...

  5. 前端学PHP之数据类型

    × 目录 [1]总括 [2]布尔型 [3]整型[4]浮点型[5]字符串[6]数组[7]对象[8]NULL[9]资源 前面的话 同javascript一样,php也是一门弱类型语言,或者说成类型松散的语 ...

  6. Util应用程序框架公共操作类(八):Lambda表达式公共操作类(二)

    前面介绍了查询的基础扩展,下面准备给大家介绍一些有用的查询封装手法,比如对日期范围查询,数值范围查询的封装等,为了支持这些功能,需要增强公共操作类. Lambda表达式公共操作类,我在前面已经简单介绍 ...

  7. 基础知识javascript--事件

    群里有一个小伙伴在处理事件监听函数的时候,遇到了一点问题,正好我比较空闲,于是帮他指出了代码中的问题,顺便整理一下,方便以后遇到类似问题的伙伴们有一个参考. 这是一个很简单的问题,对于基础知识比较杂实 ...

  8. ECharts使用心得

    ECharts百度旗下图标插件,在展示地图.雷达图等方面有很好的支持. 应用场景: 自动生成X轴的数据: 设置:xAxis的type=value || type=time 并且设置series的dat ...

  9. Oracle库Delete删除千万以上普通堆表数据的方法

    需求:Oracle数据库delete删除普通堆表千万条历史记录. 直接删除的影响: 1.可能由于undo表空间不足从而导致最终删除失败的问题: 2.可能导致undo表空间过度使用,影响到其他用户正常操 ...

  10. 1Z0-053 争议题目解析502

    1Z0-053 争议题目解析502 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 502.A database is running In ARCHIVBXXMS mode. It ...