在学习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:;padding:;}

       .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:;}

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

完整代码如下：

 <!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

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

css3 旋转效果加上双面显示效果的更多相关文章

  1. 一个css3 旋转效果 -- 待续

    <div class="container"> <div> <figure></figure> <figure>< ...

  2. 网页前端开发：微博CSS3适用细节初探

    浏览器,作为一神器,帮我们打开了缤纷万千的网络世界窗口.而她发展到今天,也诞生了一个又一个的怀神版本,可能有人钟情于她的花哨,有人痴迷于她的速度……我们,作为重构工程师,必然要更关注他背后的技术革新, ...

  3. css3图片翻转

    <!DOCTYPE> <html lang="en"> <head> <meta http-equiv="Content-Typ ...

  4. CSS3性能体验

    如今许多新技术名词在不断的被提及中,已然向我们靠近.某篮球运动员说了:“变向过人”不是超级明星的专利,也许我也可以试着去做,现在看起来效果还不错...那么,现在我们来体验CSS3:CSS3中的动画功能 ...

  5. 2015/11/7用Python写游戏，pygame入门(7)：碰撞检测

    我们已经完成了飞机大战的大部分东西,但是游戏还是没有办法正式开玩,因为子弹并不能打掉飞机.只有完成了这一个工作,游戏才算基本成型. 今天的内容就非常简单了,就是做到这个碰撞检测,以及控制好子弹和飞机的 ...

  6. 开胃小菜——impress.js代码详解

    README 友情提醒,下面有大量代码,由于网页上代码显示都是同一个颜色,所以推荐大家复制到自己的代码编辑器中看. 今天闲来无事,研究了一番impress.js的源码.由于之前研究过jQuery,看i ...

  7. Css3动画（一） 如何画3D旋转效果或者卫星围绕旋转效果

    如何画3D旋转效果或者卫星围绕旋转效果,当然这个也是工作中的一个任务,我在网上翻了一下,并没有找到类似的东西,所以写下来还是费了一番功夫,因此我把它拿出来记录一下,当然替换了一部分内容.好了,话不多说 ...

  8. css3 3D旋转效果

    css3 record2 css3 3D旋转效果 需理解transform css3知识: keyframes transform perspective jsfiddle demo keyframe ...

  9. 多种css3时尚侧栏菜单展开显示效果Off-Canvas Menu Effects

    今天我们想分享多种css3时尚侧栏菜单展开显示效果.侧边栏应用广泛,我们之前已经产生了一些效果灵感.风格演变,今天我们要展示一套新的灵感的现代效果.不同的布局和菜单的同步转换和页面可以让一切看起来更有 ...

随机推荐

  1. .net 在不同情况下调用带soapheader的webservice的方式

    国庆长假到了,本想出去玩玩,无奈自己屌丝一枚,啥都没有,只能自己宅在家里思考思考人生.不过人生还是过于复杂,一时间也想不出个所以然,只能是整理一下在工作中遇到的一些小问题,首先是关于带soaphead ...

  2. Debian apt-get 无法补全

    今天发现在终端里输入apt-get inst后按Tab键无法自动补全成 install,纳闷之余google了一下(我承认开始是baidu...),原来是没有安装 bash-completion. s ...

  3. 关于linux-Centos 7下mysql 5.7.9的rpm包的安装方式 (转)

    操作系统:Centos 7.1 mysql数据库版本:mysql5.7.9 mysql官方网站:http://www.mysql.com ------------------------------- ...

  4. Mysql 死锁相关操作

    该随笔随时记录日常工作中遇到的关于mysql的死锁相关问题 1)查看mysql当前的处理线程(connection) mysql> show processlist; 2)杀掉对应的connec ...

  5. Java 正则表达式漏洞

    由于工作原因,一直没有时间把在线上遇到的问题总结一下.还好,今天我来了. 废话少说了. 主要说一下“java 正则表达式中的一个漏洞”,详细问题描述 http://bugs.sun.com/bugda ...

  6. H.264编码之IDCT变换原理

    上次讲到了DCT变换的推导过程,这次主要给大家讲下IDCT反变换的推导过程.建议大家先看上次讲的DCT变换公式推导过程.这样在看这篇文章时会容易很多!话不多说,让我们开始IDCT的旅程吧! IDCT反 ...

  7. LeetCode 61

    Rotate List Given a list, rotate the list to the right by k places, where k is non-negative. For exa ...

  8. 我是如何自学Android，资料分享

       我是如何自学Android,资料分享(2015 版) 已经完成,我的建议是先把这一篇看完,再看2015 版的.关于我在学习中开发的项目代码,已经发布在: 爱开发-源码搜索,集成了上万个App源码 ...

  9. 修改Windows硬盘分区名称

    本文由 www.169it.com 收集整理 如果用户在将 XP 重装成Win7/Win8时,原本的硬盘分区名称可能会出现无法更改的情况,重新命名也都起不了作用.这种情况一般是因为使用 XP 系统下 ...

  10. ubuntu下mysql的环境搭建及使用

    ubuntu下mysql的环境搭建及使用 环境安装 使用如下命令分别安装服务端程序,客户端程序,及客户端依赖库 sudo apt-get install mysql-server sudo apt-g ...