思路

外部盒子包两个盒子

外部盒子绝对定位，内部两盒子相对定位

外部盒子hover触发内部盒子的变形

内部盒子变形的具体调整

完整代码

<style>.outter{border: 2px solid black;position:relative;width: 800px;height: 300px;}.outter div{width: 300px;height: 300px;}.pic{background-color: #a1a1a1;position:absolute;left:0px;top:0px;transform:perspective(800px) rotateY(0deg);backface-visibility: hidden;transition:all 1s linear;}.outter:hover .pic{transform:perspective(800px) rotateY(180deg);}.txt{background-color: #ff5cc9;position: absolute;left:0px;top:0px;transform:perspective(800px) rotateY(-180deg);backface-visibility: hidden;transition:all 1s linear;    }.outter:hover .txt{transform:perspective(800px) rotateY(0deg);}</style><div class="outter"><div class="pic"></div><div class="txt"><h1>i am content</h1></div>
</div>

css-transform-案例-翻转牌效果相关推荐

CSS布局案例 5-51 折扇效果
文章目录前言实现过程 1.步骤 2.代码 3.效果前言使用css3实现折扇效果. 实现过程 1.步骤折扇效果实现步骤:1.先制作一个底座,还有几个扇叶(绝对定位实现组合)2.旋转几个扇叶3. ...
CSS实现元素翻转效果
CSS实现元素翻转效果元素翻转的效果能让用户有良好的体验感. 先看看效果: CSS实现元素翻转的效果有两种思路 1.定义一个父元素,父元素中两个子元素,两个子元素分别是背面与正面,两个子元素同时翻转 ...
CSS transform属性的简单应用——双开门动画效果
1.效果演示 CSS transform属性有许多效果,平移.旋转.缩放等. 这里简单应用平移效果,实现双开门动画,以下为效果图. 2.设计思路设置一张居中的需要隐藏的底图. 设置封面图,平分成左右 ...
php 3d animation,CSS_纯CSS实现菜单、导航栏的3D翻转动画效果，我曾经向大家展示过闪光的logo - phpStudy...
纯CSS实现菜单.导航栏的3D翻转动画效果我曾经向大家展示过闪光的logo,燃烧的火狐狸,多重嵌套动画等例子,今天,我们将要制作一个简单但非常酷的3D翻转菜单.大家可以先看看实际效果,下面有效果截图 ...
仅使用HTML和CSS实现的标签云效果
标签云的效果在博客和网站上不难见到,它其实就是带有超链接的某些关键字,为了达到强调主题的作用.通常出现概率比较大或者受欢迎的标签文字显示比较大,相反的就显示的小. 来源于TagCrowd.com 我们 ...
前端实现图片快速反转替换_在canvas上实现元素图片镜像翻转动画效果的方法
一.Canvas图片水平镜像翻转效果预览 demo页面中点击图片动画效果可见. 二.Canvas上实现图片镜像翻转的实现 CSS中要想实现元素的翻转效果,比较简单,例如我们希望某一张图片水平镜像翻转, ...
CSS 实现图片翻转
今天学到一个CSS的小知识,记录分享一下:就是使用CSS来实现图片翻转-------把鼠标放在图片上时可以翻转图片,移开后又恢复原状话不多说,直接上代码: <!DOCTYPE html> ...
图片(旋转/缩放/翻转)变换效果(ccs3/滤镜/canvas)
以前要实现图片的旋转或翻转,只能用ie的滤镜来实现,虽然canvas也实现,但ie不支持而且不是html标准. css3出来后,终于可以用标准的transform来实现变换,而canvas也已成为ht ...
css实现提示信息,纯CSS 实现tooltip 内容提示信息效果
Tooltip 也就是内容的提示信息,合理使用可以给用户比较好的体验. 实现方法有很多种,有很多JS 插件,我这里介绍的是纯CSS实现的方法,兼容性也比较靠谱,IE8+均可正常显示.实现方法也非常简单 ...

css-transform-案例-翻转牌效果

思路

完整代码

css-transform-案例-翻转牌效果相关推荐

最新文章

热门文章