文档章节

CSS实现3D旋转

陆地上的飞鱼
 陆地上的飞鱼
发布于 2013/12/16 23:25
字数 319
阅读 75
收藏 0
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>E::before_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe @gmail.com , www.doyoe.com" />
<style>
body{margin:0;}
.hh{-webkit-perspective-origin:50% 100px;-moz-perspective-origin:50% 100px;-webkit-perspective:400;-moz-perspective:400;}
.div1{margin:100px auto 0;width:200px;height:200px;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-transition:-webkit-transform 2s linear;-moz-transition:-moz-transform 2s linear;-webkit-transform:rotateX(0) rotateY(0);-moz-transform:rotateX(0) rotateY(0);position:relative;-webkit-animation:animations 5s linear infinite;-moz-animation:animations 5s linear infinite;}
.div1:hover{-webkit-transform:rotateX(90deg) rotateY(90deg);-moz-transform:rotateX(90deg) rotateY(90deg);}
.div1 div{width:200px;height:200px;background:rgba(0,0,0,0.6);position:absolute;line-height:200px;text-align:center;color:#fff;font-size:30px;font-family:"微软雅黑";font-weight:bold;}
.div2{-moz-transform:rotateY(0) translateZ(100px);-webkit-transform:rotateY(0) translateZ(100px);}
.div3{-moz-transform:rotateY(90deg) translateZ(100px);-webkit-transform:rotateY(90deg) translateZ(100px);}
.div4{-moz-transform:rotateY(-90deg) translateZ(100px);-webkit-transform:rotateY(-90deg) translateZ(100px);}
.div5{-moz-transform:rotateY(180deg) translateZ(100px);-webkit-transform:rotateY(180deg) translateZ(100px);}
.div6{-moz-transform:rotateX(-90deg) translateZ(100px);-webkit-transform:rotateX(-90deg) translateZ(100px);}
.div7{-moz-transform:rotateX(90deg) translateZ(100px);-webkit-transform:rotateX(90deg) translateZ(100px);}
@-webkit-keyframes animations{
 0%{-webkit-transform:rotateX(0) rotateY(0);}
 25%{-webkit-transform:rotateX(90deg) rotateY(90deg);}
 50%{-webkit-transform:rotateX(180deg) rotateY(180deg);}
 75%{-webkit-transform:rotateX(270deg) rotateY(270deg);}
 100%{-webkit-transform:rotateX(360deg) rotateY(360deg);}
}
@-moz-keyframes animations{
 0%{-moz-transform:rotateX(0) rotateY(0);}
 25%{-moz-transform:rotateX(90deg) rotateY(90deg);}
 50%{-moz-transform:rotateX(180deg) rotateY(180deg);}
 75%{-moz-transform:rotateX(270deg) rotateY(270deg);}
 100%{-moz-transform:rotateX(360deg) rotateY(360deg);}
}
</style>
</head>
<body>
<div class="hh">
<div class="div1"><div class="div2">春</div><div class="div3">天</div><div class="div4">在</div><div class="div5">哪</div><div class="div6">里</div><div class="div7">呀</div></div>
</div>
</body>
</html>

© 著作权归作者所有

陆地上的飞鱼
粉丝 20
博文 16
码字总数 5403
作品 0
成都
高级程序员
私信 提问
程序猿必备的10款超炫酷HTML5 Canvas插件

  1.超炫酷HTML5 Canvas 3D旋转地球动画   这是一款基于HTML5 Canvas的3D地球模拟动画,动画以太空作为背景,地球在太空中旋转,同时我们也可以拖拽鼠标来从不同的角度观察地球。另外我们...

爱前端
2017/12/04
0
0
HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果

首先感谢w3cfuns的老师~ 今天给大家带来一个CSS3制作的翻牌效果,就是鼠标移到元素上,感觉可以看到元素背后的信息。大家如果制作考验记忆力的连连看、扑克类的游戏神马的,甚至给女朋友写一...

lmj623565791
2014/06/19
0
0
使用 three.js 中的 CSS3DRenderer 实现 3d 卡片的效果

前言 最近要做一个 3D 卡片的效果,设计图如下: 第一次尝试 第一次尝试选择了我比较熟悉的 PixiJS,关于我如何用 PixiJS 中的 Sprite3d 做了一个失败的 3D 卡片,可以 戳这里查看。 第二次尝...

NingBo
04/16
0
0
还原一个 Windows 10 Metro 布局

前言 Win10 Metro 相较于前一代完全扁平化风格的 Win8 Metro 在动画效果与交互体验上有了比较大的差异,那么想要实现一个较为逼真的Win10 Metro需要哪些动画效果呢? 真的是Windows 10 Metr...

yuanfux
2018/10/10
0
0
H5中的3D转换和帧动画

Html5中的3D转换和Css3动画 (3)3D转换 (3.1)rotateX 让元素围绕着X轴进行旋转 (1)正值表示推到,负值表示鞠躬 (2)没有透视的3D是看不出来方向 (3.1)rotateY 围绕着Y轴进行旋转 (1...

范泽鹏
2016/11/09
34
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周日乱弹 —— 喝了维他茶,忘了那个她

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @xiaoniezi :#今日歌曲推荐#哈哈哈洗脑《土拨鼠之歌》 《土拨鼠之歌》 手机党少年们想听歌,请使劲儿戳(这里) 周六…… 不是该休息么, 被...

小小编辑
59分钟前
213
8
你需要知道的 5 个 Linux 新手会犯的失误

Linux 爱好者们分享了他们犯下的一些最大错误。 终身学习是明智的 —— 它可以让你的思维敏捷,让你在就业市场上更具竞争力。但是有些技能比其他技能更难学,尤其是那些小菜鸟错误,当你尝试...

xiangyunyan
今天
11
0
来迟了,用Python助你叠猫猫,抢618大红包!

目录: 0 引言 1 环境 2 需求分析 3 前置准备 4 逛店铺流程回顾 5 代码全景展示 6 总结 0 引言 最近叠猫猫的活动可真是十分的火爆,每天小伙伴们为了合猫猫忙的可谓是如火如荼。为啥要叠猫猫...

上海小胖
今天
8
0
FPGA 设备 USB Platform Cable USB

lsusbFuture Technology Devices International, Ltd FT232H Single HS USB-UART/FIFO IC

MtrS
今天
4
0
lua web快速开发指南(6) - Cache、DB介绍

"数据库"与"缓存"的基本概念 数据库与缓存是服务端开发人员的必学知识点. 数据库 "数据库"是一种信息记录、存取的虚拟标记地点的集合统称. 比如现实生活中, 我们经常会用到文件柜、书桌等等数...

水果糖的小铺子
今天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部