css3实现3D切换
用css3实现了一个比较丑的3D切换，
模型来自于慕课网的某个大神 在此谢过~
一开始因为没有设置3D什么的，满是纠结
直接贴代码啦
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0px;
margin: 0px;
text-decoration: none;
}
.wrapper{
margin: 0 auto;
width: 100%;
perspective: 4000px;
}
.wrapper .content{
width: 30%;
float: left;
margin-top: 30px;
margin-left: 30px;
white-space: nowrap;
position: relative;
display: flex;
transform-style: preserve-3d;
transition: transfrom .6s;
}
.wrapper .content img{
width: 455px;
height: 255px;
/* opacity: 0.1; */
border-radius: 10%;
box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
transform: translateZ(127.5px);
transition: all .6s;
}
.wrapper .content span{
border-radius: 10%;
box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
width: 455px;
height: 255px;
text-align: left;
background: linear-gradient(to bottom, rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
transform: rotateX(-90deg) translateZ(127.5px);
transition: all .6s;
position: absolute;
left: 0px;
z-index: 1000;
white-space: normal;
display: flex;
flex-direction: column;
justify-content: center;
}
.wrapper .content:nth-of-type(1):hover,.wrapper .content:nth-of-type(2):hover,.wrapper .content:nth-of-type(3):hover{
transform: rotateX(90deg);
transition: all .6s;
}
.wrapper .content:nth-of-type(4):hover,.wrapper .content:nth-of-type(5):hover,.wrapper .content:nth-of-type(6):hover{
transform: rotateX(93deg);
transition: all .6s;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">
<img src="https://pic2.qiyipic.com/image/20140415/4e/32/5f/v_105669963_m_601_180_101.jpg" alt="">
<span class="inf">
<strong>澳门风云</strong>闻名中外，曾担任美国赌场保安总顾问的魔术手石一坚，终回流澳门退休，更宴请各方朋友到来庆祝生日宴。
</span>
</div>
<div class="content">
<img src="https://pic4.qiyipic.com/image/20140417/b5/01/81/a_100003950_m_601_m2_180_101.jpg" alt="">
<span class="inf">
<strong>改过迁善</strong> 该剧讲述了金明民饰演的律师在失忆后回顾自己以往的所作所为心生忏悔，为弥补自己犯下的错误而与自己曾经工作过的律师事务所对簿公堂的故事。
</span>
</div>
<div class="content">
<img src="https://pic1.qiyipic.com/common/lego/20140521/4515581d06cc4d5b8ab320da2cf3778d.jpg" alt="">
<span class="inf">
<strong>父子刑警</strong> 本剧改编自雫井修介小说《Bitter Blood》。剧中，新晋刑警·佐原夏辉（佐藤健饰）被分配到银座警察
</span>
</div>
<div class="content">
<img src="https://pic5.qiyipic.com/image/20140319/7a/8d/4f/a_100003478_m_601_m1_180_101.jpg" alt="">
<span class="inf">
<strong>果宝特攻3</strong> 果宝特攻3,顾名思义是果宝特攻的第二部续集,已在国家广播电影电视总局备案.暂定剧情为:菠萝吹雪偶然间穿越到了古代的水果世界
</span>
</div>
<div class="content">
<img src="https://pic0.qiyipic.com/image/20140517/ce/e8/42/v_106167752_m_601_180_101.jpg" alt="">
<span class="inf">
<strong>红眼</strong>1988年7月16日，从汉城始发的列车发生了一起严重的交通事故，造成100多人死亡。
</span>
</div>
<div class="content">
<img src="https://pic6.qiyipic.com/image/20140303/da/e9/aa/v_105073913_m_601_180_101.jpg" alt="">
<span class="inf">
<strong>熊出没之夺宝熊兵</strong>一场漆黑雨夜的意外事故，一段笑料十足的误打误撞，将两个外表相似却内容各异的箱子调换。
</span>
</div>
</div>
</body>
</html>
