html5和css3实现的3D滚动特效
今天给大家带来一款html5和css3实现的3D滚动特效。效果图如下:
实现的代码。
html代码:
- <div class="container">
- <div class="cube">
- <div class="side side1">
- </div>
- <div class="side side2">
- </div>
- <div class="side side3">
- </div>
- <div class="side side4">
- </div>
- <div class="side side5">
- </div>
- <div class="side side6">
- </div>
- </div>
- </div>
- <div class="container container2">
- <div class="cube">
- <div class="side side1">
- </div>
- <div class="side side2">
- </div>
- <div class="side side3">
- </div>
- <div class="side side4">
- </div>
- <div class="side side5">
- </div>
- <div class="side side6">
- </div>
- </div>
- </div>
css3代码:
- body{
- height:100vh;
- }
- .container{
- position:absolute;
- height:100px;
- width:100px;
- left:33%;
- top:50%;
- -webkit-transform: translateX(-50%) translateY(-50%);
- transform: translateX(-50%) translateY(-50%);
- -webkit-perspective:400px;
- perspective:400px;
- }
- .cube{
- height:100px;
- widht:100px;
- -webkit-transform-origin:50% 50%;
- transform-origin:50% 50%;
- -webkit-transform-style:preserve-3d;
- transform-style:preserve-3d;
- -webkit-animation:rotate 4s infinite ease-in-out;
- animation:rotate 4s infinite ease-in-out;
- }
- .side{
- position:absolute;
- display:block;
- height:100px;
- width:100px;
- }
- .side1{
- background:#41C3AC;
- -webkit-transform:translateZ(100px);
- transform:translateZ(100px);
- }
- .side2{
- background:#FF884D;
- -webkit-transform:rotateY(90deg) translateZ(100px);
- transform:rotateY(90deg) translateZ(100px);
- }
- .side3{
- background:#32526E;
- -webkit-transform:rotateY(180deg) translateZ(100px);
- transform:rotateY(180deg) translateZ(100px);
- }
- .side4{
- background:#65A2C5;
- -webkit-transform:rotateY(-90deg) translateZ(100px);
- transform:rotateY(-90deg) translateZ(100px);
- }
- .side5{
- background:#FFCC5C;
- -webkit-transform:rotateX(90deg) translateZ(100px);
- transform:rotateX(90deg) translateZ(100px);
- }
- .side6{
- background:#FF6B57;
- -webkit-transform:rotateX(-90deg) translateZ(100px);
- transform:rotateX(-90deg) translateZ(100px);
- }
- @-webkit-keyframes rotate{
- 0%{
- -webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);
- }
- 33.33%{
- -webkit-transform:rotateX(360deg) rotateY(0deg) rotateZ(0deg);
- }
- 66.66%{
- -webkit-transform:rotateX(360deg) rotateY(360deg) rotateZ(0deg);
- }
- 100%{
- -webkit-transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);
- }
- }
- @keyframes rotate{
- 0%{
- transform:rotateX(0deg) rotateY(0deg);
- }
- 50%{
- transform:rotateX(360deg) rotateY(0deg);
- }
- 100%{
- transform:rotateX(360deg) rotateY(360deg);
- }
- }
- a{
- font-family:helvetica;
- color:#428bca;
- text-align:center;
- display:block;
- }
- .container2{
- left:66%;
- }
- .container2 .side{
- border-radius:50%;
- }
html5和css3实现的3D滚动特效的更多相关文章
- 基于css3的文字3D翻转特效
一款基于css3的文字3D翻转特效.这款特效当鼠标经过文字的时候3D翻转显示阴影.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="compo ...
- HTML5/CSS3(PrefixFree.js) 3D文字特效
之前在园子里看到一个HTML5/CSS3的文字特效(这里),觉得挺好玩的所以小小的研究了下,不过发现代码都是针对webkit以及FF的所以IE跪了. Runjs 我将示例中的代码进行了精简,后来发现C ...
- 三款精美的html5及css3的源码插件
1.HTML5 3D爱心动画 晚来的七夕礼物 七夕情人节刚过,今天小编却在国外的网站上看到一个利用HTML5和CSS3制作的3D爱心动画,莫非老外也过七夕?当然小编还是将这款HTML5 3D爱心动画收 ...
- 7款外观迷人的HTML5/CSS3 3D按钮特效
1.CSS3超酷3D弹性按钮 按钮实现非常简单 今天我又要向大家分享一款实现超级简单的CSS3 3D弹性按钮,它在鼠标按下时不仅从视觉上感受到3D立体的效果,而且更有弹性的动画特效,非常可爱. 在线演 ...
- IT兄弟连 HTML5教程 CSS3属性特效 3D变换1
3D变换较2D变换多了一下的转换属性,3D转换属性及描述如表1: 表1 3D转换属性 3D的转换方法如表2: 表2 3D转换方法 1 transform-style transform- ...
- Html5+Css3 Banner Animation 多方位移动特效
背景:朋友问我小米官网的mi4的特效会做吗,可能新接的一个小网站需要用到.一直有打算研究H5C3的一些效果,趁此机会,赶紧学习一下! 效果:如图 素材 HTML: <div class=&quo ...
- 基于html5海贼王单页视差滚动特效
分享一款基于html5海贼王单页视差滚动特效是一款流行滑落网页特效代码.效果图如下: 在线预览 源码下载 实现的代码: <div class="top"> < ...
- 3D HTML5 Logo标志 超炫酷旋转特效
今天又要为大家带来一款超酷的HTML5 Canvas 3D动画特效,是一款可以旋转的HTML5 Logo标志.画面上一共有两块可旋转的区域,第一是可旋转的背景,第二则是可旋转的Logo标志.Logo标 ...
- 12种炫酷HTML5 SVG和CSS3表单浮动标签特效
这是一组效果非常炫酷的HTML5 SVG和CSS3表单浮动标签特效.这组浮动标签特效共12种效果,使用SVG和CSS3来制作完成.这些浮动标签效果部分在元素的伪元素上使用CSS transitions ...
随机推荐
- Quartz 任务调度框架之Hello World
0x01 什么是Quartz? Quartz是一个完全由java编写的开源作业调度框架. 0x02 实战Quartz Hello World 创建Maven项目,POM 文件配置如下: <pro ...
- 互联网创业原则与创业模式attilax大总结
互联网创业原则与创业模式attilax大总结 1. 适合普通人的的创业模式1 1.1. 网络创业 兼职创业 概念创业 团队 创业 内部创业..1 2. 创业模式大总结1 2.1. 工作室创业1 2 ...
- [nginx]编译安装及安全优化
nginx配置-最后整理版 nginx_upstream_check_module nginx-module-vts nginx打补丁 nginx编译安装 - 下载 cd /usr/local/src ...
- 绕过chrome的弹窗拦截机制
在chrome的安全机制里面,非用户触发的window.open方法,是会被拦截的.举个例子: var btn = $('#btn'); btn.click(function () { //不会被拦截 ...
- 行为类模式(八):状态(State)
定义 当一个对象的内在状态改变时允许改变其行为,这个对象看起来像是改变了其类. 状态模式主要解决的是当控制一个对象状态的条件表达式过于复杂时的情况.把状态的判断逻辑转移到表示不同状态的一系列类中,可以 ...
- IP地址格式转换(htonl、ntohl;inet_addr、inet_ntoa)
名词解析: 主机字节序: 不同的CPU有不同的字节序类型,这些字节序是指整数在内存中保存的顺序,这个叫做主机序.最常见的有两种 1.Little endian:低字节存高地址,高字节存低地址 2.Bi ...
- (转)Linux下的输入/输出重定向
Linux环境中支持输入输出重定向,用符号<和>来表示.0.1和2分别表示标准输入.标准输出和标准错误信息输出,可以用来指定需要重定向的标准输入或输出,比如 2>lee.dat 表示 ...
- 【Socket】linux广播技术
1.mystery引入 1)本学期学的ARP协议和NTP协议都属于广播技术的实现,所以借此机会了解下广播技术的底层原理 2)在IP地址中,如果最后一个数字为255,则一定是一个广播 ...
- Chrome中使用flash引起cpu飙升问题的处理
本人使用的是Chrome 30 flash 18,在看视频或者登陆有调用flash插件的页面之后,经常会遇到Shockwave Flash插件CPU占用超过50%的情况(在Chrome的任务管理器可以 ...
- Python nose单元测试框架的安装与使用
[本文出自天外归云的博客园] 安装(Python2下安装) pip install nose 原理与命名规则 Nose会自动查找源文件.目录或者包中的测试用例,符合正则表达式(?:^|[\b_\.%s ...