基于css3的3D立方体旋转特效_html/css_WEB-ITnose
程序员文章站
2022-06-12 17:27:47
...
今天给大家分享一款基于css3的3D立方体旋转特效。这款特效适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。效果图如下 :
在线预览 源码下载
实现的代码。
html代码:
123456
css3代码:
*{margin: 0;padding: 0;}html,body{height: 100%;background: black;}.wrap{ height: 100%;position: relative; -webkit-transform-style:preserve-3d; -webkit-perspective:0px; -moz-transform-style:preserve-3d; -moz-perspective:0px; -webkit-animation:mydhua 5s ease infinite; -moz-animation:mydhua 5s ease infinite; }.box{width: 200px;height: 200px;position: absolute;top: 50%;left: 50%; margin:-100px 0 0 -100px; line-height: 200px;text-align: center;font-size: 48px;color: white; }.box1{ -webkit-transform:rotatey(90deg) translatez(-100px); -moz-transform:rotatey(90deg) translatez(-100px); background: rgba(128,0,128,.5);}.box2{ -webkit-transform:rotatey(90deg) translatez(100px); -moz-transform:rotatey(90deg) translatez(100px); background: rgba(255,0,255,.5);}.box3{ -webkit-transform:rotatex(90deg) translatez(100px); -moz-transform:rotatex(90deg) translatez(100px); background: rgba(255,153,204,.5);}.box4{ -webkit-transform:rotatex(90deg) translatez(-100px); -moz-transform:rotatex(90deg) translatez(-100px); background: rgba(0,204,255,.5);}.box5{ -webkit-transform: translatez(-100px); -moz-transform:translatez(-100px); background: rgba(153,204,255,.5);}.box6{ -webkit-transform: translatez(100px); -moz-transform:translatez(100px); background: rgba(0,255,255,.5);}@-webkit-keyframes mydhua{ 0%{-webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);-webkit-transform-origin: center center;} 100%{-webkit-transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg);-webkit-transform-origin: center center; }}@-moz-keyframes mydhua{ 0%{-moz-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);-webkit-transform-origin: center center;} 100%{-moz-transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg); -webkit-transform-origin: center center;}}
上一篇: MySQL数据库安全解决方案
下一篇: PHP开发实战权威指南,php实战指南
推荐阅读
-
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
-
HTML5 利用CSS3 中的3D 模块绘制一个旋转3D正方体
-
html中css3之3d基本知识点 完成一个立方体的并且让其旋转
-
一款利用html5和css3实现的3D滚动特效的教程
-
一款基于css3麻将筛子3D翻转特效的实例教程
-
荐 CSS3——3D变形及轮播图,开门,导航栏旋转特效的应用
-
8套迷人精致的CSS3 3D按钮动画_html/css_WEB-ITnose
-
基于CSS3制作的鼠标悬停动画菜单_html/css_WEB-ITnose
-
基于CSS3给图片添加旋转背景特效_html/css_WEB-ITnose
-
基于css3的3D立方体旋转特效_html/css_WEB-ITnose