写旋转木马的时候，突发奇想想加个遮罩效果，那当然是用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. 小甲鱼OD学习第7讲

    这次我们任务是破解这个有日期限制的软件,效果如图所示 我们一边下断点一边调试哪里是NAG窗口的程序,最终我们发现在地址 00489912  处的代码是NAG窗口的代码 通过观察我们把004898E1处 ...

  2. JSONP && CORS

    前天面试被问到了跨域的问题,自我感觉回答的并不理想,下面我就分享一下整理后的总结分享给大家 一.为什么要跨域 安全限制 JavaScript或Cookie只能访问同域下的内容——同源策略 同源策略 下 ...

  3. gitlab10.0安装手记

    + +exec chpst -e /opt/gitlab/etc/gitlab-workhorse/env -P \ + -U git \ + -u git \ + /opt/gitlab/embed ...

  4. CentOS7 修改网卡名称为eth0

    前言 无论是RHEL 7.还是CentOS 7都使用了NetworkManager.service来进行网络管理,当然network服务还是可以继续使用的,但也将会是过渡期的残留品了. 除此之外7版本 ...

  5. PKUWC 2018游记

    PKUWC 2018游记 标签: Day\([-inf,0)\) 停课之后一直各种浪的飞起,考试rank20+,不搞颓但是学习很没有状态.还经常带着耳机被谢总抓了好几次,然后被拉过去谈话了好几次... ...

  6. 机器学习03：K近邻算法

    本文来自同步博客. P.S. 不知道怎么显示数学公式以及排版文章.所以如果觉得文章下面格式乱的话请自行跳转到上述链接.后续我将不再对数学公式进行截图,毕竟行内公式截图的话排版会很乱.看原博客地址会有更 ...

  7. markdown流程图画法小结

    markdown流程图画法小结 markdown 画图 流程图 最简单的流程图为例 ```mermaid!  graph TD  A --> B //在没有(),[].{}等括号的情况之下,图标 ...

  8. java库中的具体的集合

    1.ArrayList  一种可以动态增长和缩减的索引序列:速度较慢适合用于不修改太多的元素    采用的数组 2.LinkEdList  一种可以在任何位置进行高效的插入和删除操作的有序序列,适合于 ...

  9. Linux上查看用户名和组并把特定用户放到特定的组之下

    cat /etc/passwd             //查看所有的用户信息 cat /etc/passwd|grep 用户名       //查看某一个用户的信息 cat /etc/group   ...

  10. hihoCoder1310 岛屿 (dfs)

    思路:首先dfs求得所有联通块,再搜索的同时把每个联通块的坐标都保存下来,然后把每个联通块处理一下–首先得到某个联通块的最小横坐标和纵坐标,然后让每个坐标去减去这个横坐标和纵坐标.相当于使得所有联通块 ...