您的位置：首页 > Web前端 > CSS

css3 旋转效果加上双面显示效果

2015-04-27 16:13 183 查看

在学习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样式代码

body{margin: 0;padding:0;}

.rotate{
transition: 2s ease;
}
.out:hover .rotate{
transform:rotateY(180deg);
transition: 2s ease;
}

现在问题来了，查看效果时，发现始终只有一个一个方块在翻转，第二个方块被覆盖了，被上层的方块给挡住了。ps:这里困扰了我一两个小时。

查css3 手册，及网上资料时发现，css3的3d旋转效果，并没有分层的这种思想，直接是以你看的视角为主，没有实际透视的那么直接。效果上说明是3d的旋转实际上你是看不到下层被遮挡的部分的，这里我一开始是使用translateZ,来解决这个问题，但实际上是不成的，还是会覆盖。所以其实最好的方法就是调透明度，既然下层的部分是被覆盖了，那我让上层的部分在翻转时，透明不就可以了，实事证明这是可行的且正确的，代码如下：

.back{
opacity: 0.4;
transition: 1s opacity;
}
.out:hover .back{opacity: 1;}

现在做成那种效果只需要布局就可以了。

完整代码如下：

 <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
body{margin: 0;padding:0;}

.rotate{
transition: 2s ease;
}
.out:hover .rotate{
transform:rotateY(180deg);
transition: 2s ease;
}
.back{
opacity: 0.4;
transition: 1s opacity;
}
.out:hover .back{opacity: 1;}
</style>
</head>
<body>
<div style="width: 960px;height: 400px;">
<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>

</div>

</body>
</html>

现在复制代码就可以运行了

补充说明，兼容性问题：

由于我只在IE11下测试，兼容性出现一点问题，如果在IE下运行，需要在父标签，class="out",这个div中加上transform-style:preserve-3d;告诉浏览器执行3d效果

交流学习：1689986723

感谢@上位者的怜悯的指正！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航