0068 3D 旋转:rotateXrotateYrotateZrotate3d

Posted jianjie

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了0068 3D 旋转:rotateXrotateYrotateZrotate3d相关的知识,希望对你有一定的参考价值。

3D 旋转rotateX

3D 旋转指可以让元素在三维平面内沿着 x 轴、y 轴、z 轴 或者自定义轴进行旋转

  1. 语法

    • transform: rotateX(45deg) -- 沿着 x 轴正方向旋转 45 度
    • transform: rotateY(45deg) -- 沿着 y 轴正方向旋转 45 度
    • transform: rotateZ(45deg) -- 沿着 z 轴正方向旋转 45 度
    • transform: rotate3d(x, y, z, 45deg) -- 沿着自定义轴旋转 45 deg 为角度
  2. 代码案例

    div {
      perspective: 300px;
    }
    
    img {
      display: block;
      margin: 100px auto;
      transition: all 1s;
    }
    
    img:hover {
      transform: rotateX(-45deg)
    }
  3. 左手准则

    • 左手的手拇指指向 x 轴的正方向

    • 其余手指的弯曲方向就是该元素沿着 x 轴旋转的方向

技术图片

?

demo
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            /* 记住,一定要写perspective,不然没有3D效果 */
            perspective: 200px;
        }
        
        img {
            display: block;
            margin: 100px auto;
            transition: all 1.5s;
        }
        
        img:hover {
            transform: rotateX(45deg);
        }
    </style>
</head>

<body>
    <img src="media/pig.jpg" alt=""> hahahha

</body>

</html>

技术图片

3D 旋转 rotateY
  1. 代码演示

    div {
      perspective: 500px;
    }
    
    img {
      display: block;
      margin: 100px auto;
      transition: all 1s;
    }
    
    img:hover {
      transform: rotateY(180deg)
    }
  2. 左手准则

    • 左手的拇指指向 y 轴的正方向

    • 其余的手指弯曲方向就是该元素沿着 y 轴旋转的方向(正值)

技术图片

demo
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            perspective: 500px;
        }
        
        img {
            display: block;
            margin: 100px auto;
            transition: all 1s;
        }
        
        img:hover {
            transform: rotateY(45deg);
        }
    </style>
</head>

<body>
    <img src="media/pig.jpg" alt="">
</body>

</html>

技术图片

3D 旋转 rotateZ
  1. 代码演示

    div {
      perspective: 500px;
    }
    
    img {
      display: block;
      margin: 100px auto;
      transition: all 1s;
    }
    
    img:hover {
      transform: rotateZ(180deg)
    }
  2. rotate3d

    • transform: rotate3d(x, y, z, deg) -- 沿着自定义轴旋转 deg 为角度
    • x, y, z 表示旋转轴的矢量,是标识你是否希望沿着该轴进行旋转,最后一个标识旋转的角度
      • transform: rotate3d(1, 1, 0, 180deg) -- 沿着对角线旋转 45deg
      • transform: rotate3d(1, 0, 0, 180deg) -- 沿着 x 轴旋转 45deg
  3. 代码演示

    div {
      perspective: 500px;
    }
    
    img {
      display: block;
      margin: 100px auto;
      transition: all 1s;
    }
    
    img:hover {
      transform: rotate3d(1, 1, 0, 180deg)
    }
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            body {
                perspective: 500px;
            }
    
            img {
                display: block;
                margin: 100px auto;
                transition: all 1s;
            }
    
            img:hover {
                /* transform: rotateZ(180deg); */
                /* transform: rotate3d(x,y,z,deg); */
                /* transform: rotate3d(1, 0, 0, 45deg); */
                /* transform: rotate3d(0, 1, 0, 45deg); */
                transform: rotate3d(1, 1, 0, 45deg);
            }
        </style>
    </head>
    
    <body>
        <img src="media/pig.jpg" alt="">
    </body>
    
    </html>

技术图片

以上是关于0068 3D 旋转:rotateXrotateYrotateZrotate3d的主要内容,如果未能解决你的问题,请参考以下文章

html5如何让图片3d旋转

html5如何让图片3d旋转?

css3怎么让3d旋转的层近大远小

Unity 3D 物体旋转放大。

HTML 3D旋转特效,前端开发常用javascript特效_3D旋转

如何css制作3d旋转立方体效果?