css3翻转后显示背部隐藏的元素的效果3D翻转效果- transform rotate backface-visibility
2016-06-24 21:44
519 查看
最近在做一个项目，需求是鼠标移入一个div元素，此元素进行翻转，将背部遮挡的div元素显示出来。
想法是将这两个div绝对定位，重叠在一起，背部的元素初始化transform: rotateY(180deg)；然后翻转
这个元素的父元素。这样就实现了想要的效果。
最终代码如下：
注意标红的部分，这个属性的意思是当元素背部朝向屏幕时隐藏
<!DOCTYPE html>
<html >
<head>
<title>test</title>
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<meta name="author" content="xuyunfei">
<meta name="description" content="">
<meta name="keywords" content="test,html">
<title>test</title>
<style>
*{ margin: 0; padding: 0; box-sizing: border-box; }
.container, .container.one, .two{ width: 100px; height: 100px; }
.container{ position: relative; transition: 1s; transform-style: preserve-3d; }
.container:hover { transform: rotateY(180deg); }
.one{ position: absolute; top: 0; background: red; transform: rotateY(180deg);
backface-visibility: hidden;
}
.two{ position: absolute; top: 0; background: yellow;
backface-visibility: hidden;
}
</style>
</head>
<body>
<div class="par">
<div class="container">
<div class="one">隐藏在背后的元素</div>
<div class="two">初始显示在前面的元素</div>
</div>
</div>
</body>
</html>
想法是将这两个div绝对定位，重叠在一起，背部的元素初始化transform: rotateY(180deg)；然后翻转
这个元素的父元素。这样就实现了想要的效果。
最终代码如下：
注意标红的部分，这个属性的意思是当元素背部朝向屏幕时隐藏
<!DOCTYPE html>
<html >
<head>
<title>test</title>
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<meta name="author" content="xuyunfei">
<meta name="description" content="">
<meta name="keywords" content="test,html">
<title>test</title>
<style>
*{ margin: 0; padding: 0; box-sizing: border-box; }
.container, .container.one, .two{ width: 100px; height: 100px; }
.container{ position: relative; transition: 1s; transform-style: preserve-3d; }
.container:hover { transform: rotateY(180deg); }
.one{ position: absolute; top: 0; background: red; transform: rotateY(180deg);
backface-visibility: hidden;
}
.two{ position: absolute; top: 0; background: yellow;
backface-visibility: hidden;
}
</style>
</head>
<body>
<div class="par">
<div class="container">
<div class="one">隐藏在背后的元素</div>
<div class="two">初始显示在前面的元素</div>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 