【CSS】旋转中的视差效果

效果

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    <title> Document </title>
    <link type="text/css" rel="styleSheet" href="index.css" />
  </head>
  <body>
    <div class="container">
      <!--Emmet缩写: div.item*5>img[src=./$.png] -->
      <div class="item"><img src="./1.jpg" alt=""></div>
      <div class="item"><img src="./2.jpg" alt=""></div>
      <div class="item"><img src="./3.jpg" alt=""></div>
      <div class="item"><img src="./4.jpg" alt=""></div>
      <div class="item"><img src="./5.jpg" alt=""></div>
    </div>
  </body>
</html>

index.css

.container{
  width: 500px;
  height: 500px;
  margin: 0 auto;
  margin-top: 120px;
  /*设置item元素布局为网关布局*/
  display: grid;
  /*设置container元素的3列，宽度为1fr--r*/
  grid-template-columns: repeat(3,1fr);
  /*设置container元素的3行，高度为1fr--r*/
  grid-template-rows: repeat(3,1fr);
  /*设置container元素的网格布局模版--r*/
  grid-template: 
    'A A B'
    'C D B'
    'C E E';
  /*设置container元素的网格间距--r*/
  grid-gap: 5px;
  /*设置container元素的变量--r*/
  --r: 360deg;
  /*rotation: 给img元素设置旋转动画,其中变量为--r= -360deg 逆时针旋转*/
  /*10s: 动画总耗时10s*/
  /*linear: 动画使用线性过度*/
  /*infinite: 循环执行动画*/
  animation: rotation 10s linear infinite;
}

/* 设置第1个item item 在grid-template对应的区域A*/
.item:nth-child(1){
  grid-area: A;
}

/* 设置第2个item item 在grid-template对应的区域B*/
.item:nth-child(2){
  grid-area: B;
}

/* 设置第3个item item 在grid-template对应的区域C*/
.item:nth-child(3){
  grid-area: C;
}

/* 设置第4个item item 在grid-template对应的区域D*/
.item:nth-child(4){
  grid-area: D;
}

/* 设置第5个item item 在grid-template对应的区域E*/
.item:nth-child(5){
  grid-area: E;
}

.item {
  /*设置item元素布局为弹性布局*/
  display: flex;
  /*设置item元素水平居中*/
  justify-content: center;
  /*设置item元素垂直居中*/
  align-items: center;
  overflow: hidden;
  /*设置item元素边框*/
  /*2px: 宽度2px*/
  /*solid: 线型为实线*/
  border:  2px solid;
}

.item img{
  /*设置img元素的变量--r*/
  --r: -360deg;
  /*设置img元素旋转的图像尺寸，解决旋转过程中的白边问题*/
  width: 260%;
  height: 260%;
  /*保持图像的宽高比*/
  object-fit: cover;
  /*rotation: 给img元素设置旋转动画,其中变量为--r= -360deg 逆时针旋转*/
  /*10s: 动画总耗时10s*/
  /*linear: 动画使用线性过度*/
  /*infinite: 循环执行动画*/
  animation: rotation 10s linear infinite;
}

/*旋转动画 旋转 变量--r*/
@keyframes rotation {
  to {
    transform: rotate(var(--r));
  }
}

知识点

1. grid-template 与 grid-area 搭配使用快速布局

.grid-container {
  display: grid;
  grid-template:
    "header header" auto
    "sidebar main" 1fr
    "footer footer" auto; /* 定义网格的结构 */
  grid-gap: 10px; /* 设置行和列之间的间隔为10px */
  height: 500px;
}

.item {
  background-color: #ccc;
  padding: 20px;
}

.item1 {
  grid-area: header; /* 放置在名为 "header" 的区域 */
}

.item2 {
  grid-area: sidebar; /* 放置在名为 "sidebar" 的区域 */
}

.item3 {
  grid-area: main; /* 放置在名为 "main" 的区域 */
}

.item4 {
  grid-area: footer; /* 放置在名为 "footer" 的区域 */
}

在这个示例中，我们使用 grid-template 属性来定义网格的结构。通过使用字符串，我们指定了网格的行和列，以及它们的名称。每一行和列都可以具有不同的大小和单位。

通过给每个网格项设置相应的 grid-area 值，我们将它们放置在指定的区域中。这里的区域名称对应于 grid-template 中定义的行和列的名称。

这个示例中的网格布局结构如下：

header	header
sidebar	main
footer	footer

通过以上示例，您可以看到如何使用 grid-template 和 grid-area 属性创建一个具有命名区域的网格布局，并将网格项放置在指定的位置,相同名称将会合并成一个区域。

2. 巧用变量和反向旋转

在源代码动画中使用变量--r，是的顺时针旋转父元素.container和逆时针旋转子元素.item img共用一个rotation 动画。

这里子元素采用与父元素的反向旋转以抵消整体旋转导致子元素内部图片旋转，改善视觉体验。

.container{
  --r: 360deg;
  animation: rotation 10s linear infinite;
}

.item img{
  --r: 360deg;
  animation: rotation 10s linear infinite;
}

@keyframes rotation {
  to {
    transform: rotate(var(--r));
  }
}

资源

1.jpg

2.jpg

3.jpg

4.jpg

5.jpg