最近看一下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. AngularJs入门之表单开发

    本文和大家分享的主要是前端开发中必备的AngularJs框架表单开发相关基础知识,希望对大家使用和学习AngularJs有所帮助. 1.简单的表单提交: 2.更多的表单元素: 3.初始化表单: 代码 ...

  2. OpenCASCADE Curve Length Calculation

    OpenCASCADE Curve Length Calculation eryar@163.com Abstract. The natural parametric equations of a c ...

  3. HTTP协议基础

    一.介绍 Hyper Text Transfer Protocol(超文本传输协议)主要用于从WWW服务器传输超文本到本地浏览器的传送协议.已发展到1.1版本. 二.HTTP在TCP/IP参考模型的位 ...

  4. ABZ理论

    前言 身为著名的创业者+投资人,LinkedIn和Paypal的联合创始人Reid Hoffman有一个令我印象深刻的ABZ理论,他认为,你在任何时刻,手中都需要有三个计划:A计划.B计划和Z计划. ...

  5. 关于SubSonic3.0插件使用SqlQuery或Select查询时产生的System.NullReferenceException异常修复

    早上在编写执行用例时,突然爆异常System.NullReferenceException: 未将对象引用设置到对象的实例 执行代码:

  6. Objective-C中的老板是这样发通知的（Notification)

    ​    ​通知(Notification)简单的类比一下,公司的老总给下面的员工发通知啦,说明天公司要上市,各部门做一下准备工作.等通知发完,各部门收到后各司其职,做着自己该做的东西.假如Boss是 ...

  7. MySQL数据库实例参数对比脚本

    如何对比两个MySQL实例的参数情况,生产中常会有这样的需求,最近写了个python脚本,可基本实现该需求. 脚本 #!/usr/bin/python import MySQLdb,sys def f ...

  8. DDD 领域驱动设计－“臆想”中的实体和值对象

    其他博文: DDD 领域驱动设计-三个问题思考实体和值对象 DDD 领域驱动设计-三个问题思考实体和值对象(续) 以下内容属于博主"臆想",如有不当,请别当真. 扯淡开始: 诺兰的 ...

  9. javascript URL实现简易书签

    简介 在HTML中,我们可以将js嵌入到script标签中,可以嵌入到行内代码中,也可以嵌入到src(href)中. 后者称作javascript URL.该方式的URL格式固定:javascript ...

  10. 微信小程序开发初体验

    微信小程序上线几天了,趁着周末补了一下JS,然后今天参照文档和教程写了个小demo 文档地址       教程地址 看文档就看了一点时间,因为以前没接触过JS框架,但是接触过PHP框架= = ,所以理 ...