css3 SD效果

標籤：20px   ima   border   ansi   block   rgb   inline   splay   nbsp   

<div class="container">
　　<h1>CSS3 滑鼠滑過3D效果</h1>
　　<div class="show">
　　　　<div class="item">
　　　　　　<img src="image/1.jpg" />
　　　　　　<span class="active">
　　　　　　<h3>網站標題</h3>
　　　　　　<p>聞名中外，曾擔任美國賭場保安總顧問的魔術手石一堅，聞名中外，曾擔任美國賭場保安總顧問的魔術手石一堅，終迴流澳門退休。</p>
　　　　　　</span>
　　　　</div>
　　</div>

</div>

 

 

.show{
width:320px;
height:140px;
display:inline-block;
margin:1.2rem 0.4rem;
position:relative;
cursor:pointer;
border-radius:10px;
}

.item{
width:320px;
height:140px;
display:block;
transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-mo-transform-style:preserve-3d;
transition:transform 0.6s ;
-webkit-transition:transform 0.6s ;
-moz-transition:transform 0.6s ;
-ms-transition:transform 0.6s ;
}

 

 

當滑鼠滑過 div出現3D 效果
.item:hover{
-webkit-transform: translateZ(-50px) rotateX(95deg);
-moz-transform: translateZ(-50px) rotateX(95deg);
-ms-transform: translateZ(-50px) rotateX(95deg);
-o-transform: translateZ(-50px) rotateX(95deg);
transform: translateZ(-50px) rotateX(95deg);
}

.item img{
width:320px;
height:140px;
position:absolute;
top:0;
background-position:center center;
-transform:translateZ(60px);
-webkit-transform:translateZ(60px);
-moz-transform:translateZ(60px);
-ms-transform:translateZ(60px);
transition:all 0.6s;
-webkit-transition:transform 0.6s ;
-moz-transition:transform 0.6s ;
-ms-transition:transform 0.6s ;
-o-transition:all 0.6s;
box-shadow:5px 5px 5px 5pxrgba(0,0,0,0.3);
border-radius:10px;
}

.active{
display:block;
position:absolute;
top:0;
width:320px;
height:140px;
text-align:left;
padding:6px 8px;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
border-radius:10px;
background:#fff;
box-shadow:0px 5px 5px 5px rgba(0,0,0,0.3);
transform:rotateX(-90deg) translateZ(60px);
-webkit-transform:rotateX(-90deg) translateZ(60px);
-moz-transform:rotateX(-90deg) translateZ(60px);
-ms-transform:rotateX(-0deg) translateZ(60px);
transition:all 0.6s;
-webkit-transition:transform 0.6s ;
-moz-transition:transform 0.6s ;
-ms-transition:transform 0.6s ;
-o-transition:all 0.6s;
}

.active p{
text-indent:1.2rem;
}

.active h3{
text-align:center;
line-height:8px;
}

css3 SD效果