css-:hover+zoom和transform: scale()区别

一、:hover

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

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

.indiv {
   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 {
             300px;
            height: 300px;
            background: red;
            zoom: 0.5;/*实际元素的宽高会发生变化*/
        }

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

查看全文

相关阅读:
内置函数二
 内置函数一
 lambda表达式
 函数参数
 set集合
 元组和字典的功能
 列表功能介绍
 分篮子
 松鼠配对？
奇数次的数？

原文地址：https://www.cnblogs.com/linding/p/13277635.html