写旋转木马的时候，突发奇想想加个遮罩效果，那当然是用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. JavaWeb项目架构之NFS文件服务器

    NFS简介 NFS(Network File System)即网络文件系统. 主要功能:通过网络(局域网)让不同的主机系统之间可以共享文件或目录. 主要用途:NFS网络文件系统一般被用来存储共享视频, ...

  2. main函数的实现解析

    main函数的传参的实现,其实也是一个解析字符串的过程:将每个word后一个空格改为“/0”,将单词提取出来. 就是这么简单. 废话不多说,直接上代码: #include<stdio.h> ...

  3. [Python Study Notes]批量将ppt转换为pdf v1.0

    ''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' ...

  4. [转]用JavaScript在浏览器中创建下载文件

    前端很多项目中,都有文件下载的需求,特别是JS生成文件内容,然后让浏览器执行下载操作(例如在线图片编辑.在线代码编辑.iPresst等. 但受限于浏览器,很多情况下我们都只能给出个链接,让用户点击打开 ...

  5. 2017年StackOverflow上最好的20个Python问题

    1.Python的 .. (点号 点号) 是什么语法? 答案地址:https://stackoverflow.com/questions/43487811/what-is-python-dot-dot ...

  6. Dynamics 365 Online-多选域

    参与过Dynamics CRM相关工作的朋友们都知道,Dynamics 365之前并没有多选域字段,想要实现多选域,需要自己添加WebResource定制,而这也带来了一系列需要考虑的情况,比如额外的 ...

  7. es2015及es2017对我们的编程方式造成了什么影响？

    记一些写代码中用得到的es6+语法,至于什么正则的拓展,数组的什么fill方法,对我们来说用处不大,就不提及了. 还有es6的import模块和class模块,这些在各种框架中都有体现,而且语法简单, ...

  8. the c programing language 学习过程6

    payroll工资名单 hierarchy分层层次 vexing 使人烦恼的 alignment结盟 semantics 语义 aethetic审美 parameterize 参数化 1结构标记 成员 ...

  9. nyoj720 项目安排 二分+dp

    思路:dp(i)表示前i个项目的最大收益,转移方程很好写dp(i) = max{ dp(k) + val(i) },val(i)表示第i个项目的价值,dp(k)表示前k个的最佳收益,k满足ed(k) ...

  10. 如何架构一个合适的企业API网关

    API Gateway(API GW / API 网关),顾名思义,是出现在系统边界上的一个面向API的.串行集中式的强管控服务,这里的边界是企业IT系统的边界,主要起到隔离外部访问与内部系统的作用. ...