2D转换-CSS之照片墙





照片墙



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>照片墙</title>
    <style>
        .gk{
            height: 400px;
            background-color: #46474b;
            text-align: center;
        }
        .gk li{
            list-style: none;
            width: 150px;
            height: 200px;
            background-color: red;
            display: inline-block;
            /*对应li所有hover属性添加过渡属性，时长为1秒*/
            transition: all 1s;
            /*当选中的图片需要让他们置顶，这里利用了定位流*/
            position: relative;
            /*给边框添加阴影X轴偏移0，Y轴偏移0，模糊程度为10*/
            box-shadow: 0 0 10px;
        }
        /*序选择器 获得gk的子标签*/
        .gk li:nth-child(1){
            /*设置默认的旋转角度*/
            transform: rotate(30deg);
        }
        .gk li:nth-child(2){
            transform: rotate(-40deg);
        }
        .gk li:nth-child(3){
            transform: rotate(10deg);
        }
        .gk li:nth-child(4){
            transform: rotate(45deg);
        }
        .gk li:hover{
            /*当选中的时候，放大图片，因为这里scale覆盖了rotate,所以其实作用是放在图片，并旋转到0度*/
            transform: scale(1.5);
            /*z-index配合定位流实现选中的图片高于其他图片*/
            z-index: 666;
        }
        .gk li img{
            width: 150px;
            height: 200px;
            /*盒子模型，让元素的宽度和高度不变*/
            box-sizing: border-box;
            /*增加图片的边框*/
            border: 5px solid #ffffff;
        }
    </style>
</head>
<body>
<ul class='gk'>
    <li><img src="http://gkismet.com/wp-content/uploads/2017/01/1-1.jpg" alt=""></li>
    <li><img src="http://gkismet.com/wp-content/uploads/2017/01/2-1.jpg" alt=""></li>
    <li><img src="http://gkismet.com/wp-content/uploads/2017/01/3.jpg" alt=""></li>
    <li><img src="http://gkismet.com/wp-content/uploads/2017/01/4.jpg" alt=""></li>
</ul>
</body>
</html>