css翻转（图片）具体代码示例：

 

　　HTML代码部分

 

　　<divclass="displayback">

 

　　<h3>css图片翻转示例</h3>

 

　　</div>

 

　　</div>

 

　　</div>

 

　　<divclass="wrap">

 

　　<divclass="image">

 

　　<divclass="displayfront">

 

　　<imgsrc="img.jpg"alt=""/>

 

　　</div>

 

　　css代码部分：

 

　　

 

　　

 

　　

 

　　*{

 

　　padding:0;

 

　　margin:0;

 

　　}

 

　　body{

 

　　background-color:rgb(244,244,244);

 

　　}

 

　　.wrap{

 

　　-webkit-perspective:400;

 

　　-moz-perspective:400;

 

　　float:left;

 

　　width:220px;

 

　　margin-right:20px;

 

　　}

 

　　.image{

 

　　width:100%;

 

　　height:200px;

 

　　-webkit-transform-style:preserve-3d;

 

　　-webkit-transition:1.5s;

 

　　-moz-transform-style:preserve-3d;

 

　　-moz-transition:1.5s;

 

　　}

 

　　img{

 

　　width:220px;

 

　　height:200px;

 

　　}

 

　　.wrap:hover.image{

 

　　-webkit-transform:rotateY(180deg);

 

　　-moz-transform:rotateY(180deg);

 

　　}

 

　　.display{

 

　　position:absolute;

 

　　-webkit-backface-visibility:hidden;

 

　　-moz-backface-visibility:hidden;

 

　　}

 

　　.displayh3{

 

　　color:white;

 

　　text-align:center;

 

　　}

 

　　.back{

 

　　-webkit-transform:rotateY(180deg);

 

　　-moz-transform:rotateY(180deg);

 

　　background:-webkit-gradient(linear,lefttop,leftbottom,from(#fdbb5a),to(#db5726));

 

　　background:-moz-linear-gradient(top,#fdbb5a,#db5726);

 

　　width:220px;

 

　　height:200px;

 

　　line-height:200px;

 

　　}

 

　　以上代码效果如下图：

 

　　32fc645a783de00c85589f3033c096b.png

 

　　css卡牌翻转效果，能让你看到一张卡片的正反两面上的内容。

 

　　注：perspective属性定义3D元素距视图的距离，以像素计。该属性允许您改变3D元素查看3D元素的视图。

 

　　当为元素定义perspective属性时，其子元素会获得透视效果，而不是元素本身。perspective属性只影响3D转换元素。

 

　　可能的值有：

 

　　number元素距离视图的距离，以像素计。

 

　　none默认值。与0相同。不设置透视。





本文转载自中文网