CSS基础测试18期 #63

zhangxinxu · 2020-02-20T14:30:36Z

实现下图所示的布局效果：

要求布局里面每个元素尺寸安装容器尺寸自适应。

请附上对应的CSS代码，注意缩进和代码高亮，可以使用下面语法进行高亮：

```html
你的代码在这里
```

```css
你的代码在这里
```

本期小测需要提供在线demo，不要参考别人的回答，诚实守信。

本期小测无直播答疑，但是会总结要点。

感谢您的参与！

LuckyRabbitFeet · 2020-02-20T15:43:38Z

demo

<div class="contianer">
  <div class="item1">
    <img src="https://picsum.photos/600/800?random=1" />
  </div>

  <div class="item2">
    <img src="https://picsum.photos/600/800?random=2" />
  </div>

  <div class="item3">
    <img src="https://picsum.photos/600/800?random=3" />
  </div>

  <div class="item4">
    <img src="https://picsum.photos/600/800?random=4" />
  </div>

  <div class="item5">
    <img src="https://picsum.photos/600/800?random=5" />
  </div>
</div>

.contianer {
  display: flex;
}

.contianer > div {
  position: relative;
  width: 20%;
}

.contianer > div::before {
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 141.4%;
}

.contianer > div img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.item1,
.item5 {
  transform: scale(0.9);
  z-index: 0;
}

.item2,
.item4 {
  transform: scale(0.95);
  z-index: 1;
}

.item1 {
  left: 18%;
}

.item2 {
  left: 8%;
}

.item3 {
  z-index: 2;
}

.item4 {
  right: 10%;
}

.item5 {
  right: 23%;
}

sunyongming · 2020-02-21T02:38:30Z

demo

 <div class="img-wrap">
   <img src="https://picsum.photos/200/300?random=1" alt="" class="img1">
   <img src="https://picsum.photos/200/300?random=2" alt="" class="img2">
   <img src="https://picsum.photos/200/300?random=3" alt="" class="img3">
   <img src="https://picsum.photos/200/300?random=4" alt="" class="img4">
   <img src="https://picsum.photos/200/300?random=5" alt="" class="img5">
 </div>

.img-wrap{
  transform-style:preserve-3d;
}
.img1{
  transform: translate3d(80%,0,-10px) scale(0.8,0.8);
}
.img2{
  transform: translate3d(30%,0,-5px) scale(0.9,0.9);
}
.img4{
  transform: translate3d(-30%,0,-5px) scale(0.9,0.9);
}
.img5{
  transform: translate3d(-80%,0,-10px) scale(0.8,0.8);
}

guqianfeng · 2020-02-21T03:18:38Z

demo

    <ul>
        <li>
            <img src="https://picsum.photos/200/300?random=1" alt="" class="img-1">
        </li>
        <li>
            <img src="https://picsum.photos/200/300?random=2" alt="" class="img-2">
        </li>
        <li>
            <img src="https://picsum.photos/200/300?random=3" alt="" class="img-3">
        </li>
        <li>
            <img src="https://picsum.photos/200/300?random=4" alt="" class="img-4">
        </li>
        <li>
            <img src="https://picsum.photos/200/300?random=5" alt="" class="img-5">
        </li>
    </ul>

        body{
            display: flex;
            height: 100vh;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }
        ul,li{
            list-style: none;
        }
        ul{
            display: flex;
        }
        img{
            position: relative;
            z-index: 777;
        }
        .img-2, .img-4{
            transform: scale(1.3);
            z-index: 888;
        }
        .img-3{
            transform: scale(1.5);
            z-index: 999;
        }

ziven27 · 2020-02-21T13:19:51Z

DEMO：jsbin

.gallery{ 
  position: relative;
  padding-bottom: 30%; 
  background-color: rgba(0,0,0,0.5);
}
.gallery a{
  position: absolute;
  left: 50%;
  height: 100%;
  width: 22.5%; // 100%/150% * 30%
  top: 0;
}
.gallery img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.gallery ._1{
  transform: translateX(-50%) scale(1);
  z-index: 2;
}
.gallery ._2{
  transform:translateX(-100%) scale(0.9);
  z-index: 1;
}
.gallery ._3{
  transform:translateX(0) scale(0.9) ;
  z-index: 1;
}
.gallery ._4{
  transform:translateX(-150%) scale(0.8);
}
.gallery ._5{
  transform:translateX(50%) scale(0.8);
}

<section class="gallery">
  <a href="##" class="_1">
    <img width="180" height="240" src="https://bookcover.yuewen.com/qdbimg/349573/1013562540/180" alt="1"></a>
  <a href="##" class="_2">
    <img width="180" height="240" src="https://bookcover.yuewen.com/qdbimg/349573/1016751624/180" alt="2"></a>
  <a href="##" class="_3">
    <img width="180" height="240" src="https://bookcover.yuewen.com/qdbimg/349573/1017385979/180" alt="3"></a>
  <a href="##" class="_4">
    <img width="180" height="240" src="https://bookcover.yuewen.com/qdbimg/349573/1010868264/180" alt="4"></a>
  <a href="##" class="_5">
    <img width="180" height="240" src="https://bookcover.yuewen.com/qdbimg/349573/1017621987/180" alt="5"></a>
</section>

liyongleihf2006 · 2020-02-22T00:16:17Z

jsbin

.rotate-ul{
    transform-style: preserve-3d;
    perspective: 800px;

    display:inline-block;
    white-space: nowrap;
    padding-left: 0;
}
.rotate-li{
    display: inline-block;
    list-style: none;
}
.rotate-li:nth-child(1){
    transform: translateZ(-400px);
}
.rotate-li:nth-child(2){
    transform: translateZ(-100px);
}
.rotate-li:nth-child(3){
    transform: translateZ(0px);
}
.rotate-li:nth-child(4){
    transform: translateZ(-100px);
}
.rotate-li:nth-child(5){
    transform: translateZ(-400px);
}

<ul class="rotate-ul">
    <li class="rotate-li">
        <img src="https://i.picsum.photos/id/1025/200/300.jpg"/>
    </li>
    <li class="rotate-li">
        <img src="https://i.picsum.photos/id/219/200/300.jpg"/>
    </li>
    <li class="rotate-li">
        <img src="https://i.picsum.photos/id/237/200/300.jpg"/>
    </li>
    <li class="rotate-li">
        <img src="https://i.picsum.photos/id/275/200/300.jpg"/>
    </li>
    <li class="rotate-li">
        <img src="https://i.picsum.photos/id/433/200/300.jpg"/>
    </li>
</ul>

zer0fire · 2020-02-22T14:44:52Z

Demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS18</title>
  <style>
    .img-list {
      list-style: none;
      margin: 0;
      padding: 0;
      transform-style: preserve-3d;

    }
    li.img-container {
      display: inline-block;
      margin: 0;
      padding: 0;
    }
    li.img-container:nth-child(1){
      transform: translateX(60px) translateZ(-21px) scale(0.75);
    }
    li.img-container:nth-child(2){
      transform: translateX(20px) translateZ(-20px) scale(0.85);
    }
    li.img-container:nth-child(3){
      transform: scale(1);
    }
    li.img-container:nth-child(4){
      transform: translateX(-20px) translateZ(-20px) scale(0.85);
    }
    li.img-container:nth-child(5){
      transform: translateX(-60px) translateZ(-21px) scale(0.75);
    }
  </style>
</head>
<body>
  <ul class="img-list">
    <li class="img-container" ><img src="https://via.placeholder.com/120x150/0000FF/808080 ?1" alt=""></li>
    <li class="img-container" ><img src="https://via.placeholder.com/120x150/FF0000/808080 ?2" alt=""></li>
    <li class="img-container" ><img src="https://via.placeholder.com/120x150/0000FF/808080 ?3" alt=""></li>
    <li class="img-container" ><img src="https://via.placeholder.com/120x150/FF0000/808080 ?4" alt=""></li>
    <li class="img-container" ><img src="https://via.placeholder.com/120x150/0000FF/808080 ?5" alt=""></li>
  </ul>
</body>
</html>

zy017 · 2020-02-25T03:53:25Z

demo

<div class="container">
  <div class="img-list">
    <img class="img-item" src="https://bookcover.yuewen.com/qdbimg/349573/1011092046/180" alt="">
    <img class="img-item" src="https://bookcover.yuewen.com/qdbimg/349573/1005394024/180" alt="">
    <img class="img-item" src="https://bookcover.yuewen.com/qdbimg/349573/1015753893/180" alt="">
    <img class="img-item" src="https://bookcover.yuewen.com/qdbimg/349573/1017596228/180" alt="">
    <img class="img-item" src="https://bookcover.yuewen.com/qdbimg/349573/1015445167/180" alt="">
  </div>
</div>

.container {
  width: 500px;
}
.img-list {
  perspective: 150px;
  position: relative;
  width: 40%;
  margin: 0 30% 0 30%;
}
.img-item {
  width: 100%;
  position: absolute;
  transform-style: preserve-3d;
  top: 0;
  left: 0;
}
.img-item:nth-child(1) {
  transform: translate3d(-100%, 0, -40px);
  z-index: -2;
}
.img-item:nth-child(2) {
  transform: translate3d(-50%, 0, -20px);
  z-index: -1;
}
.img-item:nth-child(3) {
  position: static;
}
.img-item:nth-child(4) {
  transform: translate3d(50%, 0, -20px);
  z-index: -1;
}
.img-item:nth-child(5) {
  transform: translate3d(100%, 0, -40px);
  z-index: -2;
}

xxf1996 · 2020-02-25T10:16:08Z

demo

html,
body {
  margin: 0;
  padding: 0;
}
.demo {
  position: relative;
  perspective: 200px;
  transform-style: preserve-3d;
  overflow: hidden;
}
.demo::after {
  content: '';
  display: block;
  padding-top: 42.7%; /* 宽高比参照375/160 */
}
.pic {
  position: absolute;
  height: 100%;
}
.pic:nth-of-type(1) {
  left: 10%;
  transform: translateX(-50%) translateZ(-30px);
}
.pic:nth-of-type(2) {
  left: 30%;
  transform: translateX(-50%) translateZ(-15px);
}
.pic:nth-of-type(3) {
  left: 50%;
  transform: translateX(-50%);
}
.pic:nth-of-type(4) {
  left: 70%;
  transform: translateX(-50%) translateZ(-15px);
  z-index: -1;
}
.pic:nth-of-type(5) {
  left: 90%;
  transform: translateX(-50%) translateZ(-30px);
  z-index: -2;
}

<div class="demo">
  <img class="pic" src="https://placem.at/things?w=100&h=160&txt=1">
  <img class="pic" src="https://placem.at/people?w=100&h=160&txt=2">
  <img class="pic" src="https://placem.at/places?w=100&h=160&txt=3">
  <img class="pic" src="https://placem.at/people?w=100&h=160&txt=4">
  <img class="pic" src="https://placem.at/things?w=100&h=160&txt=5">
</div>

zhangxinxu · 2020-03-05T08:06:28Z

要点：
3D transform translateZ轴控制，或者2D transform sacle控制都是可以的。请避免横向定位，否则会降低日后的维护性和拓展性，要把定位的变量控制在1个是最佳的。

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CSS基础测试18期 #63

CSS基础测试18期 #63

zhangxinxu commented Feb 20, 2020

LuckyRabbitFeet commented Feb 20, 2020 •

edited

Loading

sunyongming commented Feb 21, 2020 •

edited

Loading

guqianfeng commented Feb 21, 2020

ziven27 commented Feb 21, 2020

liyongleihf2006 commented Feb 22, 2020

zer0fire commented Feb 22, 2020

zy017 commented Feb 25, 2020

xxf1996 commented Feb 25, 2020

zhangxinxu commented Mar 5, 2020

CSS基础测试18期 #63

CSS基础测试18期 #63

Comments

zhangxinxu commented Feb 20, 2020

LuckyRabbitFeet commented Feb 20, 2020 • edited Loading

sunyongming commented Feb 21, 2020 • edited Loading

guqianfeng commented Feb 21, 2020

ziven27 commented Feb 21, 2020

liyongleihf2006 commented Feb 22, 2020

zer0fire commented Feb 22, 2020

zy017 commented Feb 25, 2020

xxf1996 commented Feb 25, 2020

zhangxinxu commented Mar 5, 2020

LuckyRabbitFeet commented Feb 20, 2020 •

edited

Loading

sunyongming commented Feb 21, 2020 •

edited

Loading