Css3转换-有意思的3D相册

站长

2023年02月09日 07:21 · 阅读数 50

前言转换可以对元素进行移动、缩放、转动、拉长或拉伸。可以使用2D和3D来实现我们想要的效果。

2D转换

方法

translate(x,y)---------沿着X轴和Y轴移动元素
scale(x,y)-------改变元素宽度和高度（x，y为放大倍数）
skew(x-angle,y-angle)--------沿着X轴和Y轴倾斜
rotate(angle)-------旋转（angle单位为deg） 注意translate、scale、skew、rotate可以单独设置一个方向上的效果，scale()如果只设置一个值的时候为宽高等比放大一定倍数。

例子

 <style>
    div{
      background-color: aquamarine;
      width: 100px;
      height: 100px;
      margin: 50px;
      float: left;
      font-size: 12px;
    }
    .box1{
      transform: translateY(100px);
    }
    .box2{
      transform: scale(1.5);
    }
    .box3{
      transform: rotate(90deg);
    }
    .box4{
      transform: skew(45deg);
    }
  </style>
<body>
  <div class="box">我是盒子</div>
  <div class="box1">盒子沿Y轴移动100px</div>
  <div class="box2">盒子宽高，1.5倍放大</div>
  <div class="box3">顺时针旋转90度</div>
  <div class="box4">X方向，Y方向均倾斜45度</div>
</body>

效果图

Css3转换-有意思的3D相册

3D转换

方法

用法基本和2D转换一样

translateX()-----沿X轴移动，也可以是Y、Z
perspective：numpx------视图的效果（可以理解为一个物体近距离观看还是远距离观看）
rotateX(angle)-------3D旋转，可选X、Y、Z
scaleX(x)--------缩放

例子（3D相册）

 <style>
    body{
      background-color: rgb(142, 167, 158);
    }
    .pic-3d{
      width: 200px;
      height: 200px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%) rotateX(20deg) rotateY(20deg);
      /* 视图效果 3D */
      transform-style: preserve-3d;
      transition: transform 10s;
    }
    .pic-3d:hover{
      transform: translate(-50%,-50%) rotateX(360deg) rotateY(360deg);
    }
    .box{
      position: absolute;
      left: 0;
      top: 0;
      width: 200px;
      height: 200px;
      background-size: 200px;
      opacity: 0.9;
    }
    /* 前 */
    .pic-3d div:nth-child(1){
      transform: translateZ(100px);
      background-image: url("./img/1.jpg");
    }
    /* 后 */
    .pic-3d div:nth-child(2){
      transform: translateZ(-100px);
      background-image: url("./img/2.jpg");
    }
    /* 左 */
    .pic-3d div:nth-child(3){
      transform: translateX(-100px) rotateY(-90deg);
      background-image: url("./img/3.jpg");
    }
    /* 右 */
    .pic-3d div:nth-child(4){
      transform: translateX(100px) rotateY(90deg);
      background-image: url("./img/4.jpg");
    }
    /* 上 */
    .pic-3d div:nth-child(5){
      transform: translateY(-100px) rotateX(90deg);
      background-image: url("./img/5.jpg");
    }
    /* 下 */
    .pic-3d div:nth-child(6){
      transform: translateY(100px) rotateX(-90deg);
      background-image: url("./img/6.jpg");
    }
  </style>
 <div class="pic-3d">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>

效果

Css3转换-有意思的3D相册

转载自:https://juejin.cn/post/7039909597846437919