在学习Css3的过程中,我想做一个类似金字塔,菱形翻页效果,如图这种效果
如是,我自己设计了一个,不带js的旋转效果:
1>第一步我先设计了一个方块,内含一个旋转了45deg的小方块,代码如下:
<div style="width: 141.4px;height: 141.4px; background-color: green;"> <div style="width: 100px; height: 100px; transform:rotate(45deg); margin-left: 20px;margin-top: 20px; background-color: red; position: absolute;"></div> </div>
效果图如下:
2>第二步,由于是要在3d旋转180deg后可以看到方块背后的内容,所以复制第一个方块的代码,并将background-color颜色改成其他颜色,便于观察。通过定位opaction,使两个方块重叠。
<div class="out" style="width: 141.4px; height: auto;"> <div class="rotate" style="width: 141.4px; height: auto;"> <div style="width: 141.4px;height: 141.4px; background-color: green;"> <div style="width: 100px; height: 100px; transform:rotate(45deg); margin-left: 20px;margin-top: 20px; background-color: red; position: absolute;"></div> </div> <div class="back" style="width: 141.4px;height: 141.4px; position: absolute;top: 0; background-color: yellow;"> <div style="width: 100px; height: 100px; transform:rotate(45deg); margin-left: 20px;margin-top: 20px; background-color: blueviolet; position: absolute;"></div> </div> </div> </div>
3>为了让方块旋转起来,加上css样式代码
1 body{margin: 0;padding:0;} 2 3 .rotate{ 4 transition: 2s ease; 5 } 6 .out:hover .rotate{ 7 transform:rotateY(180deg); 8 transition: 2s ease; 9 }
现在问题来了,查看效果时,发现始终只有一个一个方块在翻转,第二个方块被覆盖了,被上层的方块给挡住了。ps:这里困扰了我一两个小时。
查css3 手册,及网上资料时发现,css3的3d旋转效果,并没有分层的这种思想,直接是以你看的视角为主,没有实际透视的那么直接。效果上说明是3d的旋转实际上你是看不到下层被遮挡的部分的,这里我一开始是使用translateZ,来解决这个问题,但实际上是不成的,还是会覆盖。所以其实最好的方法就是调透明度,既然下层的部分是被覆盖了,那我让上层的部分在翻转时,透明不就可以了,实事证明这是可行的且正确的 ,代码如下:
.back{ opacity: 0.4; transition: 1s opacity; } .out:hover .back{opacity: 1;}
现在做成那种效果只需要布局就可以了。
完整代码如下:
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="Generator" content="EditPlus®"> 6 <meta name="Author" content=""> 7 <meta name="Keywords" content=""> 8 <meta name="Description" content=""> 9 <title>Document</title> 10 <style> 11 body{margin: 0;padding:0;} 12 13 .rotate{ 14 transition: 2s ease; 15 } 16 .out:hover .rotate{ 17 transform:rotateY(180deg); 18 transition: 2s ease; 19 } 20 .back{ 21 opacity: 0.4; 22 transition: 1s opacity; 23 } 24 .out:hover .back{opacity: 1;} 25 </style> 26 </head> 27 <body> 28 <div style="width: 960px;height: 400px;"> 29 <div class="out" style="width: 141.4px; height: auto;"> 30 <div class="rotate" style="width: 141.4px; height: auto;"> 31 <div style="width: 141.4px;height: 141.4px; background-color: green;"> 32 <div style="width: 100px; height: 100px; transform:rotate(45deg); margin-left: 20px;margin-top: 20px; background-color: red; position: absolute;"></div> 33 </div> 34 <div class="back" style="width: 141.4px;height: 141.4px; position: absolute;top: 0; background-color: yellow;"> 35 <div style="width: 100px; height: 100px; transform:rotate(45deg); margin-left: 20px;margin-top: 20px; background-color: blueviolet; position: absolute;"></div> 36 </div> 37 </div> 38 </div> 39 40 </div> 41 42 </body> 43 </html>
现在复制代码就可以运行了
补充说明,兼容性问题:
由于我只在IE11下测试,兼容性出现一点问题,如果在IE下运行,需要在父标签,class="out",这个div中加上transform-style:preserve-3d;告诉浏览器执行3d效果
交流学习:1689986723
感谢@上位者的怜悯的指正!