写旋转木马的时候，突发奇想想加个遮罩效果，那当然是用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. 用tig来查看git log

    sudo apt-get install tig安装软件 在项目目录下:tig查看git 的 log 常用指令:上下箭头选择log的版本enter进入具体版本查看详细k和j是上下滚动查看详细信息的内容 ...

  2. curl模拟post和get请求

    function _post($url,$post_data){     $ch = curl_init();     curl_setopt($ch, CURLOPT_URL, $url);     ...

  3. linux开放80 端口

    1.使用su登录管理员用户 2.编辑防火墙配置文件 vim /etc/sysconfig/iptables 3.在里面加入后保存 #open port 80 -A INPUT -p TCP -m st ...

  4. hibernate学习（六) flush()和clean()区别和使用

    session.flush()是强制和数据库同步 session.clean()是清除session中的缓存 对于批量数据插入的时候优化:减少cpu和内存(缓存)占用量 @Test public vo ...

  5. css渲染（一） 字体和文本

    一.字体属性 1.默认字体系列 chrome/opera:"宋体" firefox:"微软雅黑" safari/IE:Times,"宋体" ...

  6. Mysql根据指定字段的int值查出在当前列表的排名

    先看表结构和数据: DROP TABLE IF EXISTS `ndb_record`; CREATE TABLE `ndb_record` ( `id` bigint(20) NOT NULL AU ...

  7. CentOS命令修改系统时间同步

    使用Centos,遇到本地时间对不上,直接敲命令:date -s "2016-01-08  15:15:15"是立即生效了,但是重启后,系统时间还是原来的. 修改了其一是没有办法奏 ...

  8. win10外接键盘失灵

    故障描述:笔记本外接的键盘突然之间就失灵,键盘的灯不亮,无法输入 处理方程: 1. 我的电脑右击--> 管理 --> 设备管理器(开始失灵时,键盘下的HID Keyboard Device ...

  9. nyoj49 开心的小明 01背包

    思路:dp(i, j)表示用金钱j去买前i个物品能得到的最大价值.转移方程dp(i, j) = max{dp(i-1, j), dp(i-1, j-p[i]) + p[i]*w[i]}. AC代码 # ...

  10. CodeForces - 796A Buying A House

    思路:从m直接向两边枚举,如果当前点需要的费用小于等于k,说明一定是最近距离. AC代码 #include <cstdio> #include <cmath> #include ...