写旋转木马的时候，突发奇想想加个遮罩效果，那当然是用box-reflect属性了，写的效果就是不出来，原来就是手残给包图片的li标签加了个overflow：hidden，也是醉了哈哈哈哈，去掉就好啦，上代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

*{margin:0;padding:0}

html,body{width:100%;height:100%;}

body{background: url(img1/pic6.jpg) no-repeat ; background-size:cover}

ul{width:200px;height:300px; position: absolute; top:0;right:0;left:0;bottom:0;margin:auto;

transform-style: preserve-3d; transition: all 50s; animation: move 5s ease-in-out infinite;}

ul li{ list-style:none;width:180px;height:260px; position: absolute;left:0;top:0; /*overflow:hidden;*/

}

ul li img{width:100%;height:100%;

-webkit-box-reflect:below 10px linear-gradient(rgba(255,255,255,0)50%,rgba(255,255,255,0.7));

}

.img1{ transform: translateZ(350px)}

.img2{ transform: rotateY(30deg) translateZ(360px);}

.img3{ transform: rotateY(60deg) translateZ(360px);}

.img4{ transform: rotateY(90deg) translateZ(360px);}

.img5{ transform: rotateY(120deg) translateZ(360px);}

.img6{ transform: rotateY(150deg) translateZ(360px);}

.img7{ transform: rotateY(180deg) translateZ(360px);}

.img8{ transform: rotateY(210deg) translateZ(360px);}

.img9{ transform: rotateY(240deg) translateZ(360px);}

.img10{ transform: rotateY(270deg) translateZ(360px) ;}

.img11{ transform: rotateY(300deg) translateZ(360px);}

.img12{ transform: rotateY(330deg) translateZ(360px);}

@-webkit-keyframes move{

from{ transform: rotate3d(0,0,1,45deg);}

to{ transform: rotate3d(1,2,1,1000deg);}

}

body:hover ul{ transform: rotateY(45deg);}

</style>

</head>

<body>

<ul>

<li class="img1"><img src="img1/img5.jpg" ></li>

<li class="img2"><img src="img1/pic2.jpg" ></li>

<li class="img3"><img src="img1/pic4.jpg" ></li>

<li class="img4"><img src="img1/pic6.jpg" ></li>

<li class="img5"><img src="img1/pic7.jpg" ></li>

<li class="img6"><img src="img1/pic9.jpg" ></li>

<li class="img7"><img src="img1/img5.jpg" ></li>

<li class="img8"><img src="img1/pic2.jpg" ></li>

<li class="img9"><img src="img1/pic4.jpg" ></li>

<li class="img10"><img src="img1/pic6.jpg" ></li>

<li class="img11"><img src="img1/pic7.jpg" ></li>

<li class="img12"><img src="img1/pic9.jpg" ></li>

</ul>

<script type="text/javascript">

//var tz = Math.round( (180/ 2 ) / Math.tan( Math.PI / 10) );

//alert(tz);

</script>

</body>

</html>

　　

css3动画实现旋转木马的更多相关文章

  1. css3动画第一式--简单翻滚

    在w3cschool上面查阅css3的动画语法手册时,发现“css3 动画”栏目首页放了一个翻滚的div动画案例,觉得挺好看的,于是就自己模仿着写了一下,感觉还行O(∩_∩)O哈哈~ 查看原地址 下面 ...

  2. CSS3动画制作

    CSS3动画制作 rotate 绕中心旋转 fadeInPendingFadeOutUp 先渐现,停留2s,再向上滑动并逐渐消失 fadeInUp2D 向上滑动并渐现, 因Animate.css的fa ...

  3. 学习CSS3动画（animation）

    CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...

  4. 用CSS3动画，让页面动起来

    以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的d ...

  5. CSS3动画几个平时没注意的属性

    一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...

  6. 用CSS3动画特效实现弹窗效果

    提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...

  7. JavaScript - 基于CSS3动画的实现

    在痛苦的IE8时代,所有的动画都只能基于自己计算相关动画属性,开定时器setTimeout/setInterval轮询动画任务. 而肩负重任的HTML5,早已注意到了日益增强的动画,随着HTML5的降 ...

  8. CSS3动画事件

    CSS3 的动画效果强大,在移动端使用广泛,动画执行开始和结束都可以使用JS来监听其事件. animationstart animationend 以下是一个示例 <!DOCTYPE html& ...

  9. css3动画简介以及动画库animate.css的使用

    在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...

随机推荐

  1. qt实现一个简单的计算器

    1.计算器的界面如下图所示 dalog.cpp #include "dialog.h" #include "ui_dialog.h" #include<Q ...

  2. qt中创建进程

    进程:1.QProcess 进程类 QProcess *a=new QProcess(); 2.启动void QProcess::start(const QString & command, ...

  3. [Python Study Notes] Python的安装

    Windows: 1.下载安装包: 转到Python官网https://www.python.org/downloads/  ,下载最新版本的Python. 2.安装 安装到自定义的安装路径下. 3. ...

  4. css3渐变 transition使用方法

    <style> div{ width:300px; height:300px; background:#89F; margin:100px auto; transition:width 1 ...

  5. angularjs 服务详解

    一.服务 服务提供了一种能在应用的整改生命周期内保持数据的方法,它能够在控制器之间进行通信,并保持数据的一致性. 1.服务是一个单例对象,在每个应用中只会被实例化一次(被$injector): 2.服 ...

  6. 五分钟了解Hash算法

    Hash算法详解 想象一下如果高级语言(Java,C++ ,C#)中如果没有实现类似List.Map等数据结构,企业级应用开发将是多么痛苦的事吧? Key-Value这种数据结构对于数据处理非常方便. ...

  7. 对于文件File类型中的目录分隔符

    当我们在使用File f=new File(path); 对于这个path来说是一个很痛苦的事情,在不同的系统上面的分隔符号是不一样的 在windows下面的话是一个"\"而在un ...

  8. Yii2数据库操作再总结

    User::find()->all(); 此方法返回所有数据:User::findOne($id); 此方法返回 主键 id=1 的一条数据(举个例子): User::find()->wh ...

  9. CodeForces-731B

    如果当天有m支队伍,昨天选择了k个B方案,那么今天还需要买m-k个披萨,如果m-k是奇数,那就先买一种B,剩下的全部买A,如果是偶数,全部买A.如果中途出现只有0支队伍,然而昨天却买了一次B,那么直接 ...

  10. uploadify上传文件（2）--基础语法

    隔了好久,因为最近搬家,离开从小生活的城市,来到杭州.找工作.找房子等诸多事宜耽误了这篇文章许久.今天难得闲暇在旅馆中完成uploadify上传文件系列的第二篇--uploadify使用的基础语法. ...