css3的圖形3d翻轉(zhuǎn)效果應(yīng)用示例
發(fā)布時間：2014-04-08 15:38:38 作者：佚名 
我要評論
我要評論這篇文章主要介紹了css3 的圖形3d翻轉(zhuǎn)效果應(yīng)用,需要的朋友可以參考下
復(fù)制代碼
代碼如下:<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<title>css3 3d rotate</title>
<style type="text/css">
body,div,ul,li{
padding:0;
margin:0;
}
.container ul li {
height: 180px;
width: 180px;
margin-right: 20px;
margin-bottom: 20px;
display: inline;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
float: left;
}
.out_box{
position: relative;
height: 180px;
width: 180px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.out_box div{
display: block;
height: 180px;
width: 180px;
position: absolute;
left: 0;
top: 0;
background: #060;
text-align: center;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
color:#FFF;
line-height:180px;
font-size:16px;
}
.out_box .front_box{
z-index: 2;
}
.out_box .back_box{
z-index: 1;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.container ul li:hover .out_box{
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.container ul li:hover .back_box{
z-index: 3;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>
<div class="out_box">
<div class="front_box">front</div>
<div class="back_box">back</div>
</div>
</li>
<li>
<div class="out_box">
<div class="front_box">front2</div>
<div class="back_box">back2</div>
</div>
</li>
<li>
<div class="out_box">
<div class="front_box">front3</div>
<div class="back_box">back3</div>
</div>
</li>
</ul>
</div>
</body>
</html>
相關(guān)文章
CSS實現(xiàn)卡片3D翻轉(zhuǎn)效果的示例代碼
本篇文章主要介紹了CSS實現(xiàn)卡片3D翻轉(zhuǎn)效果的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-06一款基于css3麻將篩子3D翻轉(zhuǎn)特效的實例教程
這篇文章主要為大家介紹了一款基于css3麻將篩子3D翻轉(zhuǎn)特效的實例教程，css3使我們能夠跳出2d空間，實現(xiàn)3維空間的動畫效果，這里給出一個自動翻轉(zhuǎn)的3d色子動畫效果制作過程2014-12-31- 這篇文章主要介紹了css3實現(xiàn)3D色子翻轉(zhuǎn)特效的制作過程及示例代碼，非常的不錯，效果也非常棒，這里推薦給大家。2014-12-23
簡單幾步用純CSS3實現(xiàn)3D翻轉(zhuǎn)效果
這篇文章主要介紹了簡單幾步用純CSS3實現(xiàn)3D翻轉(zhuǎn)效果的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-17
