在学习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. Linux 2.6的内核编译过程

    由于上课需要,老师指定使用linux-2.6.26内核.本人是菜鸟级别的. 由于本人安装的ubuntu系统中,没有自带GCC,故需要自己安装gcc, 首先启用ROOT权限  输入:sudo -i 获取 ...

  2. Reids配置文件redis.conf中文详解

    redis的各种配置都是在redis.conf文件中进行配置的. 有关其每项配置的中文详细解释如下: 附redis.conf英文原版: # Redis configuration file examp ...

  3. 自动化中的PageObject思想

    谈着这个话题很大,因为我自己在自动化分层的方面做的就不是很好,最近在做java+selenium中,如果不分层去管理,代码就显得很乱,如下: 下面代码主要是做了一个登录,登录后在修改自己的一些个人信息 ...

  4. Spring(3.2.3) - Beans(6): 作用域

    Spring 支持五种作用域,分别是 singleton.prototype.request.session 和 global session. 作用域 说明  singleton (默认作用域)单例 ...

  5. uml与数据库设计

    一.类之间的关系如下图所示: 二.UML与数据库设计主要讨论的内容: 三.依赖关系强调的是类操作间的使用关系,类图到表结构的映射中并不涉及这种关系,所以只需讨论泛化关系.关联关系到表的映身规范. 1. ...

  6. sql常识-IN 操作符

    IN 操作符 IN 操作符允许我们在 WHERE 子句中规定多个值. SQL IN 语法 SELECT column_name(s) FROM table_name WHERE column_name ...

  7. SQL 数据库基础语句

    一.基础 1.说明:创建数据库CREATE DATABASE database-name 2.说明:删除数据库drop database dbname3.说明:备份sql server--- 创建备份 ...

  8. 关于对XE7中introduced in an ancestor and cannot be deleted的解决方案

    在Delphi XE7中设计Multi-Device Application 类型窗体中,发现删除一个组件时,提示introduced in an ancestor and cannot be del ...

  9. 基于 HTML5 的数据存储

    以前想做个静态网页APP.最初的思路是用本地文件存储数据,后来发现在手机上运行时,文件无法找到. 经过了长达几个月的搜索(实际也就几天),没有找到合适的方法. 就在绝望的时候,无意间搜到基于HTML5 ...

  10. C#学习笔记之线程 - 使用线程

    基于事件的异步模式 (EAP -- The Event-Based Asynchronous Pattern) EAP提供了一个简单的办法,通过它的类能够提供多线程能力,而不需显式的开启或管理线程.它 ...