css-:hover+zoom和transform: scale()区别 - 一路繁花似锦绣前程

顺晟科技

2022-09-13 14:22:42

一、:hover

<div class="outdiv">
  <div class="indiv"></div>
</div>

.outdiv {
  width: 100px;
  height: 100px;
  background-color: red;
  perspective: 400px;
}

.indiv {
  width: 100px;
  height: 100px;
  background-color: green;
  transition: all 1s linear;
  transform-origin: left center;
}

.outdiv:hover .indiv {
  transform: rotateY(-180deg);
}

二、zoom和transform: scale()区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .div1 {
            width: 300px;
            height: 300px;
            background: red;
            zoom: 0.5;/*实际元素的宽高会发生变化*/
        }

        .div2 {
            width: 300px;
            height: 300px;
            background: green;
            transform: scale(0.5);/*实际元素的宽高不会发生变化*/
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>

posted on 2020-07-10 09:35 一路繁花似锦绣前程阅读(264) 评论(0) 编辑收藏举报

上一篇：CSS ZOOM功能[清除IE6下的下一篇：CSS中zoom和scale的差异

网站建设

Css

css-:hover+zoom和transform: scale()区别 - 一路繁花似锦绣前程