返回顶部

收藏

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. sxwgf 发表 2016-11-19 06:10:50 CSS3鼠标滑过图片3D旋转动画
  2. sxwgf 发表 2017-12-21 15:06:48 超炫酷纯CSS3 3D折叠二级下拉菜单
  3. sxwgf 发表 2018-07-22 13:46:25 超酷的HTML5/CSS3 3D气泡悬浮菜单
  4. 天外飞仙 发表 2014-03-03 16:55:46 jquery+CSS3的3D录音带特效
  5. sxwgf 发表 2015-12-13 13:18:17 纯CSS3 3D旋转图片墙动画
  6. sxwgf 发表 2016-11-24 13:43:14 纯CSS3 3D旋转立方体动画
  7. sxwgf 发表 2017-12-07 13:11:24 CSS3 3D按钮点击弹性特效
  8. sxwgf 发表 2016-11-29 14:49:39 CSS3 3D图片向上翻转渐隐消失动画
  9. sxwgf 发表 2017-10-16 16:09:18 纯CSS3炫酷3D菜单 菜单项3D旋转动画
  10. 天外飞仙 发表 2014-03-01 19:55:24 jQuery&CSS3卡片翻转3D特效
  11. tommy 发表 2015-12-15 02:58:36 CSS3中3D综合应用及分析
  12. sxwgf 发表 2017-02-03 13:40:16 CSS3实现3D卡通文字效果

发表评论