最近看一下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. SQL语句来查询今天、昨天、7天内、30天的数据，经典！

    ---恢复内容开始--- 今天的所有数据:select * from 表名 where DateDiff(dd,datetime类型字段,getdate())=0 昨天的所有数据:select * f ...

  2. Execute Sql Task 的Result DataSet如何返回

    Execute Sql Task的Result DataSet 主要有以下四种,当Execute Sql Task返回结果之后,需要使用SSIS Variable 来接收数据. 例子中使用的数据表代码 ...

  3. 开源地图SharpMap源码解析-（1）简介

    1.简介 SharpMap最新版基于.NET Framework 4,采用C#开发的地图渲染引擎,非常易于使用.我这次研究的是比较稳定发布的V1.1版本.可以在GitHub下载该源码,地址:https ...

  4. javascript运动系列第三篇——曲线运动

    × 目录 [1]圆周运动[2]三维圆周 [3]钟摆运动 [4]抛物线[5]流体运动 前面的话 上一篇介绍了变速运动,但只实现了直线运动.如果元素的left和top同时运动,并遵循不同的曲线公式,则会进 ...

  5. 初探nodeJS

    一.node概要 对nodeJS早有耳闻,但是一直迟迟没有对它下手,哈哈哈,今儿咱就来初探一下它. nodeJS是个啥东东? nodeJS,我的理解就是可以运行在后端的JavaScript. 为什么它 ...

  6. MySQL学习笔记五：数据类型

    MySQL支持多种数据类型,大致可以分为数值,日期/时间和字符类型. 数值类型 MySQL支持所有标准SQL数值数据类型,包括严格数值数据类型(INTEGER.SMALLINT.DECIMAL和NUM ...

  7. DDD 主题交流会总结及计划

    思维碰撞才能更加进步 2015年5月16日(上周六),我们举行了一次 DDD 主题的交流会,参会者主要是 ENode 群友.以及部分园友,为什么要搞这次交流会?原因很简单,就是希望可以提供对 DDD ...

  8. 正则匹配抓取input 隐藏输入项和 <td>标签内的内容

    这里不多作解释了,只要提供方法,如果想了解正则匹配,就去百度. 第一条是,匹配出所有的隐藏输入域 $patern = "/<input(.*?)type=\"hidden\& ...

  9. C语言 第六章 多重循环

    一.概要 在c语言中,if,switch,for,while,do-while可以相互间多次嵌套. if(){ for() { for() { } } } while() { for(){ } for ...

  10. ZOJ Problem Set - 1115 Digital Roots

    水题记录: 注:此题题目并没有限定数值的大小,所以要用字符串进行处理 #include <stdio.h> #include <string.h> int main() { ] ...