css3的3d起步—

第一步：html结构

很简单的一个容器包裹着一个装了6个piece的piece-box

<div class="container"><div class="piece-box"><div class="piece piece-1"></div><div class="piece piece-2"></div><div class="piece piece-3"></div><div class="piece piece-4"></div><div class="piece piece-5"></div><div class="piece piece-6"></div></div>
</div>

第二步：加上必要的3D属性，进入3D世界

通过上面的讲解，应该对perspective比较熟悉了吧,

/*容器*/
.container {-webkit-perspective: 1000px;-moz-perspective: 1000px;-ms-perspective: 1000px;perspective: 1000px;
}
/*piece盒子*/.piece-box {perspective-origin: 50% 50%;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;-ms-transform-style: preserve-3d;transform-style: preserve-3d;
}

第三步：加入必要的样式

/*容器*/
.container {-webkit-perspective: 1000px;-moz-perspective: 1000px;-ms-perspective: 1000px;perspective: 1000px;
}
/*piece盒子*/
.piece-box {position: relative;width: 200px;height: 200px;margin: 300px auto;perspective-origin: 50% 50%;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;-ms-transform-style: preserve-3d;transform-style: preserve-3d;
}
/*piece通用样式*/
.piece {position: absolute;width: 200px;height: 200px;background: red;opacity: 0.5;}
.piece-1 {background: #FF6666;}
.piece-2 {background: #FFFF00;
}
.piece-3 {background: #006699;
}
.piece-4 {background: #009999;
}
.piece-5 {background: #FF0033;
}
.piece-6 {background: #FF6600;
}

当然，在你完成这步之后你还是只看到一个正方形，也就是我们的piece-6,因为我们的3Dtransform还没开始

转载于:https://www.cnblogs.com/liumaimai/p/9797791.html

css3的3d起步——分享相关推荐

带你玩转css3的3D！
话不多说,先上demo 酷炫css3走马灯/正方体动画: https://bupt-hjm.github.io/cs... github源码地址:https://github.com/BUPT-HJM ...
使用 CSS3 实现 3D 图片滑块效果
Slicebox – A fresh 3D image slider with graceful fallback 英文原文地址:http://tympanus.NET/codrops/2011/09 ...
运用CSS3制作3D盒子骰子
运用CSS3制作3D盒子骰子最近好像CSS3上瘾了,特喜欢找动画效果来练手(空闲时间),这不,我参照人家制作的3D盒子制作了一个骰子,参照链接: https://www.cnblogs.com/dt ...
浅谈css3的3D动画效果并制作一个简单的旋转照片墙
各位读者大家好,我是一只小菜鸟.目前正在学习web前端方面的相关知识.,这也是小菜鸟第一次写博客.写的有哪里不对的地方欢迎各位指正. 本篇文章内容就是利用简单的HTML布局再加上CSS3的3D转换和动 ...
html图片 3d切换特效,一款基于css3的3D图片翻页切换特效
今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 实现的代码. html代码: Bedouin Blue-green Dram ...
html5 3d原理,使用css创建三角形使用CSS3创建3d四面体原理及代码(html5实践)
今天读了篇关于如何使用css3创建3d四面体的文章,觉的相当不错,所以拿出来和大家分享一下. 首先要和大家分享的是,如何使用div+css创建三角形.在这里我先把相关代码粘贴出来,然后再为大家讲解原理 ...
网页特效：用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
css3实现翻转效果,css3 实现3D翻转效果
css3 实现3D翻转效果. HTML源码: 前面内容,鼠标移到这,试试用户名密码 css源码: /* entire container, keeps perspective */ .flip-c ...
CSS3中3D综合应用及分析
2019独角兽企业重金招聘Python工程师标准>>> 今天我要和大家一起来学习一个酷炫的鼠标Hover效果.主要将会涉及到CSS3中3D效果的使用,以及在实现过程中我们使用到的一些 ...

css3的3d起步——分享

css3的3d起步——分享相关推荐

最新文章

热门文章