写旋转木马的时候，突发奇想想加个遮罩效果，那当然是用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. Windows Server 2016-部署RODC只读域控制器

    只读域控制器Read-Only Domain Controller简称RODC.RODC是Windows Server 2008之后引入的一活动目录特性,与其他域控制器一样包含AD数据库,但RODC默 ...

  2. Python数据结构之三——dict（字典）

    Python版本:3.6.2  操作系统:Windows  作者:SmallWZQ 知识源于生活.Python也是如此. 提到字典,我首先想到的是数学大师--高斯. 为何想起他呢?这主要是因为高斯算法 ...

  3. PhpStorm使用之 —— Xdebug断点调试

    PhpStorm使用之 -- Xdebug断点调试 在<XAMPP的配置与使用>中已经阐述了Xdebug插件的配置,Xdebug配置完成后,只需要在IDE工具中进行相关设置,便可启动Xde ...

  4. APACHE服务器出现No input file specified.解决方案

    thinkcmf程序默认的.htaccess里面的规则: <IfModule mod_rewrite.c> RewriteEngine on RewriteCond %{REQUEST_F ...

  5. http权威指南笔记

    请求报文 响应报文GET /test/hi.txt HTTP/1.0 起始行 HTTP/1.0 200 OKAccept: text/* 首部 Content-type: text/plainAcce ...

  6. MySQL体系结构及多实例

    MySQL客户端和服务器端模型 MySQL是一个典型C/S,服务器端与客户端两部分组成 服务器端程序  mysqld mysql自带的客户端(mysql mysqladmin  mysqldump等) ...

  7. 微信小程序初识

    http://lib.csdn.net/article/wechat/46742 微信小程序的前途和定位有什么疑惑?点进去 简单先记几个印象名词:流量入口,线下是重点,“即用即走”适合低频工具类产品. ...

  8. JavaScript那些事

    1.定义静态常量:     const C=1; 该常量不能变化的. 2.在if判断中如果是两个变量比较js会将一个字符和一个数字比较的话,会将字符转换成数字然后在对这两个进行对比: var num= ...

  9. static关键字的使用总结

    1.对于static关键字的使用的时候对于修饰变量的时候,它相当于一个全局变量: 2.对于static修饰一个函数的时候他是在类被加载的时候首先会被类加载,并且只能加载一次,并且这个方法可以不需要通过 ...

  10. Spring实现无需注解实现自动注入

    xml配置 过程:设置自动装配的包-->使用include-filter过滤type选择为regex为正则表达式-->expression是表达是式也就是限制条件 <?xml ver ...