3D转换(位移,旋转)

最新推荐文章于 2023-01-01 20:23:18 发布

南城旧时

最新推荐文章于 2023-01-01 20:23:18 发布

阅读量271

点赞数 2

文章标签： 3d css html5

本文链接：https://blog.csdn.net/qq_52006046/article/details/127177795

版权

透视

语法: perspective: 取值px;

作用:可以实现近大远小,近实远虚,如果想要z轴效果生效,必须要给父级加透视

概念:调整眼睛到屏幕之间的距离,值越大距离盒子越远,盒子看起来越小,反之越大

取值,800px-1200px,这个是视距,是人一般眼睛到电脑的距离,可以不再这个范围内,小于800px透视效果要么过大,大于1200px透视效果过于微弱,但是这样透视效果要么过大,要么过于微弱

空间位移

  <style>
    body {
      /* 透视:可以实现近大远小,近实远虚,如果想要z轴效果生效,必须要给父级加透视 */
      /* 透视:调整眼睛到屏幕之间的距离,值越大距离盒子越远,盒子看起来越小,反之越大 */
      /* 透视的取值,800px-1200px,这个是视距,是人一般眼睛到电脑的距离,可以不再这个范围内,小于800px透视效果要么过大,大于1200px透视效果过于微弱,但是这样透视效果要么过大,要么过于微弱 */
      perspective: 888px;
    }

    .box {
      width: 200px;
      height: 200px;
      background-color: pink;
      transition: all 1s;
      margin: 200px auto;
    }

    .box:hover {
      /* x轴水平方向 向右正值  向左是负值 */
      transform: translateX(-400px);
      /* y轴垂直方向  向下是正值  向上是负值 */
      transform: translateY(-400px);
      /* z轴前后方向  z轴正值向前  负值向后 */
      transform: translateZ(-400px);

      /* 3d位移综合写法  translate3d(x轴,y轴, z轴) */
      transform: translate3D(200px, 200px, 200px);
      /* transform: translateX(200px) translateY(200px) translateZ(200px); */

    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

旋转

左手法则:

判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

  <style>
    .box {
      /* 不加透视,x轴和y轴旋转的正值和负值视觉上是一样的效果 */
      perspective: 800px;
      width: 400px;
      height: 400px;
      margin: 200px auto;
    }

    .box img {
      width: 100%;
      height: 100%;
      transition: all 1.5s;
    }

    .box:hover img {
      /* X轴,上下旋转,正值从上往下,负值从下往上 */
      transform: rotateX(-90deg);
      /* y轴,左右旋转,正值从左往右,负值从右往左 */
      transform: rotateY(-90deg);
      /* z轴,顺逆时针,正值顺时针,负值逆时针 */
      transform: rotateX(-90deg);

      /* 3D旋转,综合写法,rotate3d(x, y, z, 角度度数)  xyz取值为0-1,(y取值为0.5代表y轴转角度*0.5  度)跟上一个角度 */
      transform: rotate3d(1, 0.5, 1, 180deg);


    }
  </style>
</head>

<body>
  <div class="box">
    <img src="./我的案例素材/images/hero.jpeg" alt="">
  </div>
</body>