CSS3实现嵌套立方体旋转的3D效果
刚发现一个网站上面的3D立方体效果挺好看的，就模仿着用CSS3实现了一个类似的效果：http://39.105.101.122/myhtml/CSS/transform_3D/cube_3D.html
没有做IE的兼容，在谷歌浏览器里面打开可以看到效果。
这样的3D透视效果主要是用了perspective和transform-style: preserve-3d;这两个属性。然后在相应的元素上添加transform就行了。
先看一下布局结构：
<div class="container">
<div class="box">
<ul class="cube_1">
<li><img src="../Img/1.jpg"></li>
<li><img src="../Img/2.jpg"></li>
<li><img src="../Img/3.jpg"></li>
<li><img src="../Img/4.jpg"></li>
<li><img src="../Img/5.jpg"></li>
<li><img src="../Img/6.jpg"></li>
</ul>
<ul class="cube_2">
<li><img src="../Img/7.jpg"></li>
<li><img src="../Img/8.jpg"></li>
<li><img src="../Img/9.jpg"></li>
<li><img src="../Img/1.jpg"></li>
<li><img src="../Img/2.jpg"></li>
<li><img src="../Img/3.jpg"></li>
</ul>
</div>
</div>
container放在页面的适当位置，box放在container的中间位置。cube_1是外面的小正方体，cube_2是外面的小正方体。设置 ul 和 li 的position为absolute，居中定位，然后让每张图片绕Y轴或X轴旋转相应的角度，然后向Z轴移动相应的距离。布局完成后添加相应的动画，和鼠标移入的变化。
注意点：perspective和transform-style这两个属性我分别用在了cube_1和cube_2上面，设置透明度显示出来之后外面的立方体对里面的立方体没有遮挡的效果，我想这应该是cube_1和cube_2分别使用上述两个属性导致隔离开来互不影响的结果，然后又给container添加了transform-style:preserve-3d;发现遮挡效果出现了。问题解决。
代码写的有点乱，也比较臃肿：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>cube_3D</title>
6 </head>
7 <style type="text/css">
8 *{
9 margin: 0;
10 padding: 0;
11 }
12 .container{
13 width: 800px;
14 height: 500px;
15 background-color: #ccc;
16 margin: 50px auto;
17 position: relative;
18 }
19 .container .box{
20 margin: auto;
21 position: absolute;
22 width: 1px;
23 height: 1px;
24 top: 0;
25 left: 0;
26 bottom: 0;
27 right: 0;
28 background-color: red;
29 transform-style: preserve-3d;
30 }
31 @keyframes an1{
32 0%{
33 transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
34 }
35 25%{
36 transform: rotateY(180deg) rotateX(45deg) rotateZ(0deg);
37 }
38 50%{
39 transform: rotateY(360deg) rotateX(45deg) rotateZ(0deg);
40 }
41 75%{
42 transform: rotateY(270deg) rotateX(270deg) rotateZ(270deg);
43 }
44 100%{
45 transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg);
46 }
47 }
48 .container .box .cube_1{
49 list-style: none;
50 width: 200px;
51 height: 200px;
52 margin: -100px -100px;
53 position: absolute;
54 perspective: 4000px;
55 transform-style: preserve-3d;
56 animation: an1 10s linear 0s infinite;
57 }
58 .container .box .cube_1 li{
59 position: absolute;
60 width: 200px;
61 height: 200px;
62 opacity: 0.5;
63 transition: transform .2s ease-in 0s;
64 }
65 .container .box .cube_1 li img{
66 width: 200px;
67 height: 200px;
68 }
69 .container .box .cube_1 li:nth-child(1){
70 transform: rotateY(0deg) translateZ(100px);
71 transition: all 1s ease-in 0;
72 }
73 .container .box .cube_1 li:nth-child(2){
74 transform: rotateY(90deg) translateZ(100px);
75 }
76 .container .box .cube_1 li:nth-child(3){
77 transform: rotateY(180deg) translateZ(100px);
78 }
79 .container .box .cube_1 li:nth-child(4){
80 transform: rotateY(270deg) translateZ(100px);
81 }
82 .container .box .cube_1 li:nth-child(5){
83 transform: rotateX(90deg) translateZ(100px);
84 }
85 .container .box .cube_1 li:nth-child(6){
86 transform: rotateX(-90deg) translateZ(100px);
87 }
88
89 .container .box .cube_2{
90 list-style: none;
91 width: 100px;
92 height: 100px;
93 position: absolute;
94 margin: -50px -50px;
95 perspective: 4000px;
96 transform-style: preserve-3d;
97 animation: an1 10s linear 0s infinite;
98 }
99 .container .box .cube_2 li{
100 position: absolute;
101 width: 100px;
102 height: 100px;
103 }
104 .container .box .cube_2 li img{
105 width: 100px;
106 height: 100px;
107 }
108 .container .box .cube_2 li:nth-child(1){
109 transform: rotateY(0deg) translateZ(50px);
110 }
111 .container .box .cube_2 li:nth-child(2){
112 transform: rotateY(90deg) translateZ(50px);
113 }
114 .container .box .cube_2 li:nth-child(3){
115 transform: rotateY(180deg) translateZ(50px);
116 }
117 .container .box .cube_2 li:nth-child(4){
118 transform: rotateY(270deg) translateZ(50px);
119 }
120 .container .box .cube_2 li:nth-child(5){
121 transform: rotateX(90deg) translateZ(50px);
122 }
123 .container .box .cube_2 li:nth-child(6){
124 transform: rotateX(-90deg) translateZ(50px);
125 }
126
127 .container .box:hover .cube_1 li:nth-child(1){
128 transform: rotateY(0deg) translateZ(200px);
129 }
130 .container .box:hover .cube_1 li:nth-child(2){
131 transform: rotateY(90deg) translateZ(200px);
132 }
133 .container .box:hover .cube_1 li:nth-child(3){
134 transform: rotateY(180deg) translateZ(200px);
135 }
136 .container .box:hover .cube_1 li:nth-child(4){
137 transform: rotateY(270deg) translateZ(200px);
138 }
139 .container .box:hover .cube_1 li:nth-child(5){
140 transform: rotateX(90deg) translateZ(200px);
141 }
142 .container .box:hover .cube_1 li:nth-child(6){
143 transform: rotateX(-90deg) translateZ(200px);
144 }
145 </style>
146 <body>
147 <div class="container">
148 <div class="box">
149 <ul class="cube_1">
150 <li><img src="../Img/1.jpg"></li>
151 <li><img src="../Img/2.jpg"></li>
152 <li><img src="../Img/3.jpg"></li>
153 <li><img src="../Img/4.jpg"></li>
154 <li><img src="../Img/5.jpg"></li>
155 <li><img src="../Img/6.jpg"></li>
156 </ul>
157 <ul class="cube_2">
158 <li><img src="../Img/7.jpg"></li>
159 <li><img src="../Img/8.jpg"></li>
160 <li><img src="../Img/9.jpg"></li>
161 <li><img src="../Img/1.jpg"></li>
162 <li><img src="../Img/2.jpg"></li>
163 <li><img src="../Img/3.jpg"></li>
164 </ul>
165 </div>
166 </div>
167 </body>
168 </html>
CSS3实现嵌套立方体旋转的3D效果的更多相关文章
- CSS环绕球体的旋转文字-3D效果
代码地址如下:http://www.demodashi.com/demo/12482.html 项目文件结构截图 只需要一个html文件既可: 项目截图: 代码实现原理: 该示例的实现过程很简单,主要 ...
- 用css3实现摩天轮旋转的动画效果
用css3实现摩天轮旋转的动画效果 1.CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes 规则.@keyframes 规则用于创建动画.在 @keyf ...
- 超绚丽CSS3多色彩发光立方体旋转动画
CSS3添加了几个动画效果的属性,通过设置这些属性,可以做出一些简单的动画效果而不需要再去借助JavaScript.css3动画的属性主要分为三类:transform.transition以及anim ...
- transform 的旋转 ，3d效果，要添加3d效果的父级加上景深perspective。 3d效果的容器加上 transform-style：preserve-3d。
该技术用于创建一个多维的数据,在这个实例中使用了两个元素用于正面和反面.前面用来放置产品图片,底部用来放置产品信息.默认情况下产品信息隐藏起来,同时鼠标悬停在产品图片上时,隐藏在底部的产品信息在X轴放 ...
- UI动画练习 - CABasicAnimation：视图绕X/Y轴旋转（3D效果）
视图 3D 旋转 1 - 代码示例:以绕 X 轴旋转为例 1 #import "ViewController.h" 2 @interface ViewController () 3 ...
- css3学习--css3动画详解二（3d效果）
一.设置3D场景 perspective:800 //浏览器到物体的距离(像素)perspective-origin:50% (x轴) 50% (y轴) //视点的位置 transf ...
- 自己做得一个用于直观观察css3 transform属性中的rotate 3D效果
这段代码还是非常简单,是看了一个老师的视频受的启发,也是调用了很多个函数,所以比较杂乱吧! <!DOCTYPE html><html lang="en">& ...
- 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...
- 纯CSS3实现一个旋转的3D立方体盒子
简单介绍 上网易前端微专业课程,里面有一个课外作业是实现一个3D旋转立方体.花了点时间做了下.还有点意思.写个简单教程.供大家学习. 先放上终于要实现的效果 注:代码在chrome 43.0.2357 ...
- 网页特效：用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
随机推荐
- [CTF]picoCTF-day1
Lets Warm Up If I told you a word started with 0x70 in hexadecimal, what would it start with in ASCI ...
- 商品获价API调用说明：获取商品历史价格信息 代码分享
接口名称:item_history_price 公共参数 名称 类型 必须 描述 key String 是 调用key(必须以GET方式拼接在URL中)(获取测试key和secret接入) secre ...
- 关于取消DevTools listening on ws://127.0.0.1…提示的方法
Python代码写好之后,通过任务计划程序定期执行.py文件,但总会有命令窗口,虽然不影响程序执行,但每次需要手动叉掉比较烦.于是我网上搜索了一些方法. 网上的方法并没有直接解决我的问题,但我借助搜索 ...
- day14:列表/集合/字典推导式&生成器表达式&生成器函数
推导式 推导式的定义: 通过一行循环判断,遍历一系列数据的方式 推导式的语法: val for val in Iterable 三种方式: [val for val in Iterable] {val ...
- sql计算众数及中位数
众数 众数: 情况①:一组数据中,出现次数最多的数就叫这组数据的众数. 举例:1,2,3,3,4的众数是3. 情况② :如果有两个或两个以上个数出现次数都是最多的,那么这几个数都是这组数据的众数. 举 ...
- API 网关日志的价值，你了解多少？
本文介绍了 API 网关日志的价值,并以知名网关 Apache APISIX 为例,展示如何集成 API 网关日志. 作者钱勇,API7.ai 技术工程师,Apache APISIX Committe ...
- JUC中常见的集合
Map: HashMap ===> ConcurrentHashMap List: ArrayList ===> CopyOnWriteArrayList Set: HashSet === ...
- 基于Java开发的全文检索、知识图谱、工作流审批机制的知识库
一.项目介绍 一款全源码,可二开,可基于云部署.私有部署的企业级知识库云平台,应用在需要进行常用文档整理.分类.归集.检索的地方,适合知识密集型单位/历史文档丰富的单位,或者大型企业.集团. 为什么建 ...
- IE盒模型和标准盒模型之间的差别
1.W3C标准盒子模型 w3c盒子模型的范围包括margin.border.padding.content,并且content部分不包含其他部分 2.IE盒子模型 IE盒子模型的范围包括margin. ...
- #Python实例 计算外卖配送距离（基于百度API接口）---第二篇
https://www.cnblogs.com/simone331/p/17218019.html 在上一篇中,我们计算了两点的距离(链接为上篇文章),但是具体业务中,往往会存在一次性计算多组,上百甚 ...