css3实现3D翻转相册

2020-05-19 网页编程网 网页编程网

学习用flex弹性盒子，此可代替display:float与宽度，及css3动画等知识点。效果如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3D翻转相册</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
.wrap{
width: 940px;
height: 300px;
background-color: pink;
margin:100px auto ;
}
.wrap ul{
   width:100%;
   height:100%;
   list-style: none;
   /*不用，float: left;弹性盒模型，不用管宽度*/
   display: flex;
   justify-content:space-between;/*两端对齐*/
}
.wrap ul li{
   position: relative;
   width: 300px;
   height: 300px;
   perspective: 1000px;/*2D变3D*/
}
.wrap ul li img{
   width: 300px;
   height: 300px;
}
p{
   position: absolute;
   left: 0;
   top:0;
   width: 300px;
   height: 210px;/*减去撑大*/
   background-color:rgba(0,0,0,.6);
   color: white;
   text-align:center;
   padding-top: 90px;
   transform: rotateY(90deg);/*变换 旋转*/
   transition: 1s;/*过渡时间，慢慢转*/
}
.wrap ul li:hover p{/*伪类选择器*/
transform: rotateY(0deg);
}
.wrap ul li:hover img{
   transform: rotateY(-90deg);
   transition: 1s;
}
</style>
<body>
   <div class="wrap">
      <ul>
         <li><img src="1.jpg"><p>我爱你，我永远爱你。我爱你，我永远爱你。我爱你，我永远爱你。我爱你，我永远爱你。我爱你，我永远爱你。我爱你，我永远爱你。</p></li>
         <li><img src="1.jpg"><p>我爱你，我永远爱你</p></li>
         <li><img src="1.jpg"><p>我爱你，我永远爱你</p></li>
      </ul>
   </div>
</body>

阅读原文

阅读 3835

123 显示电脑版