分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了关于 css 中的转换属性，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决关于 css 中的转换属性？

开发过程中遇到关于 css 中的转换属性的问题如何解决？下面主要结合日常开发的经验，给出你关于关于 css 中的转换属性的解决方法建议，希望对你解决关于 css 中的转换属性有所启发或帮助；

* {
  padding: 0;
  margin: 0;
}
div {
  /* BACkground-image: url(img/pic-1.png); */
  BACkground-color: green;
  BACkground-repeat: no-repeat;
  wIDth: 10vw;
  height: 30vh;
  border-radius: 10px;
  padding: 0.5em;
  BACkground-size: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  Transition: 0.5s;
}
div:hover {
  Box-shadow: 5px 5px 2px greenyellow;
  transform: rotateZ(10deg);
}

<!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" />
    <link rel="stylesheet" href="style.CSS" />
    <title>document</title>
  </head>
  <body>
   <div>Lorem ipsum dolor sit amet,consectetur adipisicing elit. Molestias,nihil!</div>
  </body>
</HTML>

如您所见，我使用 transform:translate() 属性将 div 居中。当我将鼠标悬停在 div 上时，我希望它旋转约 10 度，但我知道它没有发生，因为我使用 translate 属性将 div 居中，当我评论说它工作正常。我只想知道是什么导致了这种行为。

解决方法

将 transform: rotateZ(10deg) 更改为 transform: translate(-50%,-50%) rotateZ(10deg); 以保留 traslate 值和 rotate。否则，您将在悬停时使用 translate 覆盖 rotate，元素将移动到其实际位置并从那里旋转。

* {
  padding: 0;
  margin: 0;
}
div {
  /* BACkground-image: url(img/pic-1.png); */
  BACkground-color: green;
  BACkground-repeat: no-repeat;
  width: 10vw;
  height: 30vh;
  border-radius: 10px;
  padding: 0.5em;
  BACkground-size: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  transition: 0.5s;
}
div:hover {
  box-shadow: 5px 5px 2px greenyellow;
  transform: translate(-50%,-50%) rotateZ(10deg);
}

<!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" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
   <div>Lorem ipsum dolor sit amet,consectetur adipisicing elit. Molestias,nihil!</div>
  </body>
</html>

@H_801_48@