纯CSS的鼠标悬停翻转视差效果

一款纯CSS的鼠标悬停翻转视差效果，鼠标悬停在元素区域内时，会有一个视觉差的3D翻转效果，显示翻转背面的相应内容，鼠标离开时则恢复到最初的显示状态，页面的所有元素都可以自由调整。

分类：css3 > transform 难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，设置好页面元素的样式，代码如下：

* {
	margin:0;
	padding:0;
	box-sizing:border-box;
}
body {
	height:100vh;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack:center;
	-ms-flex-pack:center;
	justify-content:center;
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center;
	-webkit-perspective:1000px;
	perspective:1000px;
	-webkit-transform-style:preserve-3d;
	transform-style:preserve-3d;
	position:relative;
	background-color:#111;
	font-family:'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
}
.container {
	min-width:700px;
	min-height:350px;
	border-radius:20px;
	position:relative;
	-webkit-transition:1.5s ease-in-out;
	transition:1.5s ease-in-out;
	-webkit-transform-style:preserve-3d;
	transform-style:preserve-3d;
}
.side {
	position:absolute;
	text-align:center;
	width:100%;
	height:100%;
	padding:20px 50px;
	color:#fff;
	-webkit-transform-style:preserve-3d;
	transform-style:preserve-3d;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	border-radius:20px;
}
.content {
	-webkit-transform:translatez(70px) scale(0.8);
	transform:translatez(70px) scale(0.8);
	line-height:1.5em;
}
.content h1 {
	position:relative;
}
.content p {
	margin-top:50px;
	line-height:2em;
}
.content h1:before {
	content:"";
	position:absolute;
	bottom:-20px;
	height:3px;
	background-color:#3e3;
	width:70px;
	left:50%;
	-webkit-transform:translateX(-50%);
	transform:translateX(-50%);
}
.front {
	color:#d4cd96;
	z-index:2;
    /* -webkit-backface-visibility: hidden; */
    backface-visibility: hidden;
    background: -webkit-repeating-linear-gradient(315deg, rgba(0, 0, 0, 0.3), transparent 1px, rgba(0, 0, 0, 0.3) 2px);
    background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.3), transparent 1px, rgba(0, 0, 0, 0.3) 2px);
    background-size: 3px 3px;
    background-color: #302f34;
}
.back {
	background-color:#333;
	-webkit-transform:rotateY(180deg);
	transform:rotateY(180deg);
	z-index:0;
	padding-top:10px;
}
.container:hover {
	-webkit-transform:rotateY(180deg);
	transform:rotateY(180deg);
}
form {
	text-align:left;
}
.back h1 {
	margin:0;
}
form label,form input {
	display:block;
}
form input,form textarea {
	background:transparent;
	border:0;
	border-bottom:2px solid #444;
	padding:5px;
	width:100%;
	color:#fff
}
form label {
	margin:15px 0;
}
form input[type="submit"] {
	display:block;
	width:auto;
	margin:10px auto;
	padding:5px 10px;
	border:3px solid #555;
	border-radius:4px;
	color:#fff;
	cursor:pointer;
}
/* my button style  */
.white-mode {
	text-decoration:none;
	padding:7px 10px;
	background-color:#122;
	border-radius:3px;
	color:#FFF;
	-webkit-transition:.35s ease-in-out;
	transition:.35s ease-in-out;
	position:fixed;
	left:15px;
	bottom:15px;
	font-family:"Montserrat";
}
.white-mode:hover {
	background-color:#FFF;
	color:#122;
}

页面的body部分，正面一个div容器里放入标题和段落标签，背面div容器里主要是一个form表单，代码如下：

<div class="container">
  <div class="front side">
    <div class="content">
      <h1>Hakkam Abdullah</h1>
      <p>I am a graphic designer and art director. I am as well specialised in front end web design, user experience and creating identities. Throughout my career, I have worked with companies of all shapes and sizes that enriched my experience </p>
    </div>
  </div>
  <div class="back side">
    <div class="content">
      <h1>Contact Me</h1>
      <form>
        <label>Your Name :</label>
        <input type="text" placeholder="Omar Khattab">
        <label>Your E-mail :</label>
        <input type="text" placeholder="Example@mail.com">
        <label>Your message :</label>
      </form>
    </div>
  </div>
</div>