最近看一下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. LINQ to Entities 不支持 LINQ 表达式节点类型“ArrayIndex”

    我就不屁话,能一张图就解决的就不说话了 2015-03-28 14:53:24,440 [10] ERROR log - System.NotSupportedException: LINQ to E ...

  2. 【.NET深呼吸】存储基于本地线程的值

    在特定情况,我们希望这样一个场景: N个线程同时调用同一个类实例的同一个操作方法,并且同一个变量可以面向每一个线程存储独立的值.比如,某变量X,它对于线程A的值与对于线程B的值是相互独立的.线程A设置 ...

  3. 【.NET深呼吸】线程信号量（Semaphore）

    Semaphore类可以控制某个资源允许访问的线程数,Semaphore有命名式的,也有不命名的:如果不考虑跨进程工作,一般在代码中使用不命名方式即可. 信号量有点类似于等待句柄,某个线程如果调用了W ...

  4. jQuery 2.0.3 源码分析 Deferred概念

    JavaScript编程几乎总是伴随着异步操作,传统的异步操作会在操作完成之后,使用回调函数传回结果,而回调函数中则包含了后续的工作.这也是造成异步编程困难的主要原因:我们一直习惯于“线性”地编写代码 ...

  5. 深入学习jQuery鼠标事件

    × 目录 [1]类型 [2]写法 [3]合成事件[4]鼠标按键[5]修改键[6]坐标位置 前面的话 鼠标事件是DOM事件中最常用的事件,jQuery对鼠标事件进行了封装和扩展.本文将详细介绍jQuer ...

  6. 从一道面试题分析javascript闭包

    据说是一不注意就会做错的五道javascript面试题之一,我们来看看这道题长什么样 function Container( properties ) { var objthis = this; fo ...

  7. 查看nginx配置文件路径

    进入nginx安装目录(我的是/usr/local/nginx-1.7.8/) 进入sbin目录,输入 ./nginx -t查看nginx配置文件路径以及该文件语法是否正确 ./nginx -v查看n ...

  8. mysql悲观锁总结和实践--转

    原文地址:http://chenzhou123520.iteye.com/blog/1860954 最近学习了一下数据库的悲观锁和乐观锁,根据自己的理解和网上参考资料总结如下: 悲观锁介绍(百科): ...

  9. struts2学习笔记--上传单个和批量文件示例

    struts2提供了对上传文件的支持,将上传后的文件封装为java.io.File对象,开发者只需要在Action中定义一个File类型的变量,然后直接使用该变量,将它复制到目的目录即可. 单个文件上 ...

  10. git开发流程、常用命令及工具、TortoiseGit使用及常见问题

    根据我最近使用git的一些经历,git是基于分支的版本控制工具,分支有远程分支和本地分支. 一.开发流程 - 从远程服务器的master,clone一份项目文件到本地,然后本地master的基础上br ...