CSS 转换 2D和3D

最新推荐文章于 2024-05-30 15:11:31 发布

Mr._Dang

最新推荐文章于 2024-05-30 15:11:31 发布

阅读量140

点赞数 1

分类专栏：小白基础文章标签： html css

本文链接：https://blog.csdn.net/m0_55832273/article/details/115313406

版权

小白基础专栏收录该内容

18 篇文章 0 订阅

订阅专栏

转换 transform

转换是css中的一个特征，可以实现元素的缩放、位移和变形。可配合‘transition’属性来使用。常用属性值：scale（缩放）、translate（位移）、rotate（旋转）、skew（倾斜）。
作用：使元素在位置或者形状上发生一定的改变。

2D

1.scale 缩放

格式： transform：scale（x y）；

x：表示水平方向上的缩放倍数。
y：表示垂直方向上的缩放倍数。
如果只写一个值表示等比例缩放属性值直接写数字。
取值大于1表示放大，小于1 表示缩小。

【注意】

缩放只是一种视觉效果，不会对其他盒子造成影响。

例：

  <style>
    .box{
      width: 100px;
      height: 100px;
      background-color: #ff6700;
      margin: 100px auto;
      transition: all 1s;
      border: 1px solid;
    }
    .box:hover{
      transform: scale(2);
    }
  </style>
</head>
<body>
   <div class="box"></div>
</body>

2.translate 位移

格式：transform：translate（水平方向数值px 垂直方向数值px）；

取值：水平位移数值为正，向右移动，为负，则向左移动。
垂直位移数值为正，向下移动，为负，则向上移动。
只写一个值，表示水平方向位移量。
参数为百分比的话，是相对于自身的宽高。

【注意】位移只是一种视觉效果，不会对别的盒子造成影响。

例：

  <style>
    .box{
      width: 100px;
      height: 100px;
      background-color: #ff6700;
      float: left;
      transition:all 1s;
    }
    .box:hover{
      transform: translate(-50px);
    }
    .box2{
      width: 100px;
      height: 100px;
      float: left;
      background-color: #2ecc71;
    }
  </style>
</head>
<body>
   <div class="box"></div>
   <div class="box2"></div>
</body>

3.rotate 旋转

格式：transform：rotate（角度数值（deg））

单位 deg。
角度数值为正，顺时针旋转。
角度数值为负，逆时针旋转。
旋转的中心点默认为元素的中心点。

转换原点：transform：水平数值垂直数值；

取值：数值px。
单词：center top right bottom left。

【注意】旋转只是一种视觉效果，不会对别的盒子造成影响。

例：

  <style>
    .box {
      width: 300px;
      height: 300px;
      background-color: #ff6700;
      margin: 100px auto;
      transition: all 10s linear;
      background-image: url("img/hb.jpg");
      background-size: cover;
      border-radius: 50%;
    }
    .box:hover{
      transform: rotate(-720deg);
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>

skew 倾斜

格式：transform：skew（水平数值角度垂直数值角度）；

单位 deg。
角度数值为正，顺时针旋转。
角度数值为负，逆时针旋转。
两个角度相加，不要大于或等于90deg。

【注意】

倾斜只是一种视觉效果，不会对别的盒子造成影响。
只能添加给块元素，不能添加给行内元素。
同时添加多个变形操作，先执行前面的，再执行后面的。
多个变形操作必须写个transform属性后面，书写多个transform属性时，后面的会层叠掉前面的。

例：

  <style>
    .box {
      width: 300px;
      height: 300px;
      background-color: #146458;
      margin: 100px auto;
      transition: transform 1s linear;
    }
    .box:hover{
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>

3D

1.3D旋转：

格式：transform：rotate3d（数值，数值，数值，旋转角度值）；

或：transform：rotateX（旋转角度）；
transform：rotateY（旋转角度）；
transform：rotateZ（旋转角度）；

指定对象的3D旋转角度，其中前三个参数分别表示旋转的方向x，y，z。
取值为0或1 0表示不旋转，1表示旋转。
第四个参数表示旋转的角度，参数不允许省略。

【注意】

浏览器默认是2D的，如果我们想看到3D效果，需要添加一个视距属性（perspective）。
视距;人眼与网页的距离。

perspective属性：

添加给变换元素的父元素。
设置的是人眼与网页平面的距离。
视距只是视觉上的效果，并不是真正的3D。

例：

  <style>
    .box{
      width: 300px;
      margin: 100px auto;
      perspective: 300px;
    }
    .box img{
      width: 100%;
      transition: transform 1s;
    }
    .box img:hover{
      transform: rotate3d(0,1,0,-45deg)
    }
  </style>
</head>
<body>
   <div class="box">
     <img src="img/4.bmp" alt="">
   </div>
</body>

2.3D位移

格式：transform：translate3d（水平数值，垂直数值，z轴数值）

或：transform:translateX(数值px)
transform:translateY(数值px)
transform:translateZ(数值px)

translate属性：

translate为正值，perspective越来越大，则盒子与你的距离越近，看到的效果也就越大。
translate为0，perspective不管发生任何变化，看到的效果不变。
translate为负值，perspective越来越小，则盒子与你的距离越近，看到的效果也就越小。

【注意】使用perspective属性，看到的效果其实是元素投射在屏幕平面上的阴影。