最近看一下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. 新作《ASP.NET Web API 2框架揭秘》正式出版

    我觉得大部分人都是“眼球动物“,他们关注的往往都是目光所及的东西.对于很多软件从业者来说,他们对看得见(具有UI界面)的应用抱有极大的热忱,但是对背后支撑整个应用的服务却显得较为冷漠.如果我们将整个“ ...

  2. ASP.NET WebAPi之断点续传下载（下）

    前言 上一篇我们穿插了C#的内容,本篇我们继续来讲讲webapi中断点续传的其他情况以及利用webclient来实现断点续传,至此关于webapi断点续传下载以及上传内容都已经全部完结,一直嚷嚷着把S ...

  3. Web APi之捕获请求原始内容的实现方法以及接受POST请求多个参数多种解决方案（十四）

    前言 我们知道在Web APi中捕获原始请求的内容是肯定是很容易的,但是这句话并不是完全正确,前面我们是不是讨论过,在Web APi中,如果对于字符串发出非Get请求我们则会出错,为何?因为Web A ...

  4. 应用程序框架实战十三:DDD分层架构之我见

    前面介绍了应用程序框架的一个重要组成部分——公共操作类,并提供了一个数据类型转换公共操作类作为示例进行演示.下面准备介绍应用程序框架的另一个重要组成部分,即体系架构支持.你不一定要使用DDD这样的架构 ...

  5. 把DATATABLE,DS中的内容用HTML的方式显示

    前几天,在搞一个数据显示的时候,因为是不固定的列的,所以需要动态创建列,这里面就运用一下,直接把数据库的Table显示在Html上,有两种方法,但是都有相应的缺点,第一个,如果内容太多,长度不好控制, ...

  6. 关于JqueryEasyUI集合Kindeditor

    写在前面 上一篇<初试JqueryEasyUI(附Demo)>: 在上一篇说过,下面要试下easyui集合编辑器,关于编辑器网上有很多,ckeditor.ueditor.kindedito ...

  7. Microsoft.Office.Interop.Word 创建word

    Microsoft.Office.Interop.Word 创建word 转载:http://www.cnblogs.com/chenbg2001/archive/2010/03/14/1685746 ...

  8. iOS 使用xib后获取view的frame出错的问题

    如果控制器使用xib做的,在viewDidLoad方法中获取的view.frame是不正确的 这根xib的加载有关, 可以把需要做的事情写在viewWillAppear中就能解决

  9. Color Transfer between Images code实现

    上计算机视觉课老师布置的作业实现论文:Color Transfer between Images 基本思路是: 1.给定srcImg和targetImg 2.将RGB空间转为Lab空间 3.根据论文中 ...

  10. HP-UX 11g RAC安装 记录

    环境:HP-UX 11.31 + GI 11.2.0.4 + Oracle 11.2.0.4 背景:本文只对HP-UX平台安装11g RAC环境过程中,针对一些跟Linux平台有差异的地方进行简单记录 ...