css 旋转图片-CSS3D 旋转图像模板

bendan520 css

2023-08-21 0 4,534 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

CSS3D旋转已经成为网页设计中最流行的技术之一css 旋转图片，而这些效果最常见的应用是在图像显示区域，使图像以360度显示。下面是一个 CSS3D 旋转图像模板。

/* HTML结构部分 */

  
    
      
    
    
      
    
  

/* CSS样式部分 */
.container {
  position: relative;
  width: 500px;
  height: 500px;
  perspective: 1000px; /* 镜头距离 */
}
.card {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d; /* 保持3D效果 */
  transition: transform 1s; /* 过渡效果 */
}
.front,
.back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* 隐藏背面 */
}
.front {
  transform: rotateY(0);
}
.back {
  transform: rotateY(180deg);
}
.container:hover .card {
  transform: rotateY(180deg);
}

这里我们使用 CSS 3D 旋转效果来显示图像css 旋转图片，首先使用 HTML 代码创建一个内部嵌套的容器模型。之后，CSS代码用于控制3D功效。

需要注意的是，这种效果的实现需要注意浏览器的兼容性，不同的浏览器对旋转功效有不同的处理，需要做好模型兼容性。

CSS3 放大和缩小了图像的比例列

在工作中，经常会遇到图像缩放的情况，比如服务器返回的图片大小，可能会大小

不同，有的大，有的小，服务器返回的图片大小我们无法控制，但是我们在设计草稿的时候，可能会规定每张图片的大小是固定的长度和高度，比如200px*200px。我们在那里使用了背景图像

但是，如果您直接使用

img tag 要引入这样的图像，其实是不可能的，所以我们目前只能使用背景图像来做。对于较大的图像，我们可以缩放，但对于较小的图像

非常小的图像，如果我们拉伸它们，可能会有点模糊，但通常不是这种情况，因为对于图像的缩放css放大图片，服务器端不太可能返回

一个非常小的图片可以追溯到过去，通常相对较大。

1. 等列缩放（1：1）。

我们先来看一下图像缩放到下一列的情况：

html代码如下：

<div class="demo1-1">
  <div class="zoomImage" style="background-image: url(./images/1.jpg)"></div>
</div>
<div class="demo1-1">
  <div class="zoomImage" style="background-image: url(./images/2.jpeg)"></div>
</div>
<div class="demo1-1">
  <div class="zoomImage" style="background-image: url(./images/3.png)"></div>
</div>

CSS 代码如下：

.demo1-1 {
  float: left;
  width: 200px;
  height: 200px;
  overflow: hidden;
}
.zoomImage {
  width: 100%;
  height: 0;
  padding-top: 100%;
  overflow: hidden;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
}

这可以在上面的代码中实现。下面是一个剖析实现的简单代码：1-1

在父容器 div.demo1-1 中，将容器显示的大小定义为 200px*200px;这是我们设计草案中显示的尺寸。

1-2 对于图像的 div，首先设置以下样式：

width: 100%;
height: 0;
padding-top: 100%;
overflow: hidden;

如上面的代码，高度实际上设置为 0css放大图片，但填充顶部设置为 100%，长度宽度：100%，高度 div 按照 1：1 的形式实现。

至于为什么需要使用填充顶部来实现它，你可以看我

以下样式如下：

background-position: center center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;

将背景

图像居中而不重复就足够了，背景大小覆盖了整个容器;

以下是所有代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .demo {
      width: 100%;
      height: 300px;
      overflow: hidden;
    }
    .demo1-1 {
      float: left;
      width: 200px;
      height: 200px;
    }
    .zoomImage, .zoomImage2, .zoomImage3{
      width: 100%;
      height: 0;
      padding-top: 100%;
      overflow: hidden;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      -webkit-background-size: cover;
      -moz-background-size: cover;
    }
    .zoomImage2 {
      padding-top: 75%;
    }
    .zoomImage3 {
      padding-top: 133.33%;
    }
  </style>
</head>
<body>
  <h2>第一张图片633*950，第二张图片1280*800，第三张图片100*100</h2>
  <div class="demo">
    <h3>对上面的三张图片的宽和高分别等比例缩放到200*200像素(1:1)</h3>
    <div class="demo1-1">
      <div class="zoomImage" style="background-image: url(./images/1.jpg)"></div>
    </div>
    <div class="demo1-1">
      <div class="zoomImage" style="background-image: url(./images/2.jpeg)"></div>
    </div>
    <div class="demo1-1">
      <div class="zoomImage" style="background-image: url(./images/3.png)"></div>
    </div>
  </div>
  <div class="demo">
    <h3>对上面的三张图片的宽和高进行4:3的缩放</h3>
    <div class="demo1-1">
      <div class="zoomImage2" style="background-image: url(./images/1.jpg)"></div>
    </div>
    <div class="demo1-1">
      <div class="zoomImage2" style="background-image: url(./images/2.jpeg)"></div>
    </div>
    <div class="demo1-1">
      <div class="zoomImage2" style="background-image: url(./images/3.png)"></div>
    </div>
  </div>
  <div class="demo">
    <h3>对上面的三张图片的宽和高进行3:4的缩放</h3>
    <div class="demo1-1">
      <div class="zoomImage3" style="background-image: url(./images/1.jpg)"></div>
    </div>
    <div class="demo1-1">
      <div class="zoomImage3" style="background-image: url(./images/2.jpeg)"></div>
    </div>
    <div class="demo1-1">
      <div class="zoomImage3" style="background-image: url(./images/3.png)"></div>
    </div>
  </div>
</body>
</html>