CSS - 左手旋转法则

最新推荐文章于 2024-07-25 08:14:42 发布

一缕白云下

最新推荐文章于 2024-07-25 08:14:42 发布

阅读量125

点赞数 8

文章标签： css 前端

本文链接：https://blog.csdn.net/buguak/article/details/140461841

版权

左手法则

法则

左手法则-根据旋转方向确定取值正负左手握住旋转轴,拇指指向正值方向,其他四个手指弯曲方向为旋转正值方向

参考图片

旋转事例

事例图片

在X轴旋转

参考代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>空间旋转-X轴</title>
    <style>
      .box {
        width: 300px;
        margin: 100px auto;
      }

      img {
        width: 300px;
        transition: all 2s;
      }

      .box {
        /* 透视效果：近大远小，近实远虚 */
        perspective: 1000px;
      }

      .box img:hover {
        transform: rotateX(80deg);
      }
    </style>
  </head>
  <body>
    <div class="box">
      <img src="./images/hero.jpeg" alt="" />
    </div>
  </body>
</html>

旋转前

旋转后

在Y轴旋转

参考代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>空间旋转-Y轴</title>
    <style>
      .box {
        width: 300px;
        margin: 100px auto;
      }

      img {
        width: 300px;
        transition: all 2s;
      }

      .box {
        /* 透视效果：近大远小，近实远虚 */
        perspective: 1000px;
      }

      .box img:hover {
        transform: rotateY(60deg);
        /*transform: rotateY(-60deg);*/
      }
    </style>
  </head>
  <body>
    <div class="box">
      <img src="./images/hero.jpeg" alt="" />
    </div>
  </body>
</html>