返回顶部

收藏

css3 3d旋转效果

更多

一款CSS实现的3D旋转(三维)效果,叫作:transform-style实例,分别在IE8、opera下测试均无法显示效果,在IE下显示的是层叠效果,在opera下显示的层重叠效果,在chrome浏览器下可以显示三维旋转的层,效果还是非常不错的。

[CSS]代码

<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<title>transform-style的3D效果测试</title>
<style>
*{font-size: 14px;color: #fff; padding:0; margin:0;}
#container {
position: relative;
height: 300px;
width: 300px;
-webkit-perspective: 500;
margin-top: 200px;
margin-right: auto;
margin-left: auto;
}
#parent {
margin: 10px;
width: 280px;
height: 280px;
background-color: #666;
opacity: 0.8;
-webkit-transform-style: preserve-3d;
-webkit-animation: spin 5s infinite linear;
}
#parent > div {
position: absolute;
top: 40px;
left: 40px;
width: 280px;
height: 200px;
padding: 10px;
-webkit-box-sizing: border-box;
}
#parent > :first-child {
background-color: #000;
-webkit-transform: translateZ(-100px) rotateY(45deg);
}
#parent > :last-child {
background-color: #333;
-webkit-transform: translateZ(50px) rotateX(20deg);
-webkit-transform-origin: 50% top;
}
/*执行Y轴旋转360度动画*/
@-webkit-keyframes spin {
from {-webkit-transform: rotateY(0);}
to {-webkit-transform: rotateY(360deg);}
}
</style>
</head>
<body>
<div id="container">
<div id="parent">
<div><a href="http://OutOfMemory.CN/">OutOfMemory.CN</a></div>
<div><a href="http://OutOfMemory.CN/">为程序员服务</a></div>
</div>
</div>
</body>
</html>

标签:css3,3d

收藏

0人收藏

支持

0

反对

0

»更多 您可能感兴趣的代码
  1. 2013-03-17 12:42:00CSS3制作卷角菜单 by 小菜的粉丝
  2. 2013-10-11 16:41:08纯CSS3渐变效果样式代码 by 冬夜微风
  3. 2014-12-24 09:07:01c++实现3d 文本 by 小黑DUODUO
  4. 2013-04-24 20:51:36CSS3创建渐变文字 by 林峰
  5. 2013-10-13 21:45:42CSS3实现的蹦蹦跳跳的loading动画效果 by 猩猩总统
  6. 2014-12-26 09:22:25css3 定义透明度 by 林峰
  7. 2013-04-27 21:54:42响应式设计入门教程 by 玉开Sir
  8. 2013-10-18 13:48:56CSS3创建页面顶部阴影 by amaker8
  9. 2014-12-26 13:20:06css3实现的圣诞雪人 by 甄码农
  10. 2012-11-03 18:16:43CSS实现3D文字 by 0晓风残月0
  11. 2018-12-02 10:32:05Mac OS 下使用80端口 by 甄码农
相关聚客文章
  1. 天外飞仙 发表 2014-02-19 12:55:38 jQuery+CSS3实现3D缩略图悬停效果
  2. sxwgf 发表 2017-09-27 00:40:41 纯CSS3 3D立体圆盘时钟动画
  3. ivy 发表 2012-03-29 22:43:31 jQuery结合CSS3实现3D翻转
  4. sxwgf 发表 2017-05-28 13:43:45 CSS3 3D柱形统计图表
  5. sxwgf 发表 2017-11-07 00:31:59 炫酷实用的CSS3 3D垂直手风琴菜单
  6. 张 鑫旭 发表 2015-03-16 16:20:00 小tip: 纯CSS实现视差滚动效果
  7. sxwgf 发表 2017-07-27 13:15:53 CSS3实现五彩3D旋转星球
  8. sxwgf 发表 2017-12-09 06:40:50 CSS3 3D鼠标滑过翻转按钮
  9. Mars 发表 2012-08-03 09:29:08 利用CSS3制作3D光照展示
  10. sxwgf 发表 2017-12-07 14:11:44 炫酷的CSS3 3D横向菜单 菜单项凸出显示
  11. fxdzb 发表 2015-06-30 06:30:58 css3 3d动画学习心得
  12. sxwgf 发表 2017-12-21 15:06:48 超炫酷纯CSS3 3D折叠二级下拉菜单

发表评论