HTML我用HTML编写的代码——跳动的心，为什么总是向左边跳动？

<!DOCTYPE html>

<html lang="en">

<head>

      <meta charset="UTF-8">

      <meta name="viewport" content="width=device-width, initial-scale=1.0">

      <title>Document</title>

</head>

      <style>

            body{

                  margin: 600px;

                  animation:xxx 1.5s infinite;  

            }

 

           .zuoxin, .youxin{

                  width: 60px;

                  height: 100px;

                  background-color: blue;

                  display: inline-block;

                  border-top-left-radius: 60px;

                  border-top-right-radius: 60px;

            }

            .zuoxin{

                  transform:translateX(35px) rotateZ(-45deg);

                  

            }

            .youxin{

                  transform:rotateZ(45deg);

            }

            

            @keyframes xxx {

                  50% { transform:scale(2);}

                  100% {transform:scale(1);}

            }

            

      </style>

<body>

      

            <div class="zuoxin"></div>

            <div class="youxin"></div>

      

</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
</head>
      <style>
            body{
                  margin: 600px;
                  animation:xxx 1.5s infinite;  
            }

           .zuoxin, .youxin{
                  width: 60px;
                  height: 100px;
                  background-color: blue;
                  display: inline-block;
                  border-top-left-radius: 60px;
                  border-top-right-radius: 60px;
            }
            .zuoxin{
                  transform:translateX(35px) rotateZ(-45deg);
                  
            }
            .youxin{
                  transform:rotateZ(45deg);
            }
            
            @keyframes xxx {
                  50% { transform:scale(2);}
                  100% {transform:scale(1);}
            }
            
      </style>
<body>
      
            <div class="zuoxin"></div>
            <div class="youxin"></div>
      
</body>
</html>

 

transform:scale(2);默认是以元素中心为原点进行缩放的，
你对body元素进行缩放，就是以整个页面的中心为原点进行缩放，
你的心形不在整个页面的中心，整个页面缩放之后自然会偏离。
 

你可以把心形的位置设置在整个页面的中心。
或者把心形放到一个与心形一样宽高的div中，对这个div进行缩放动画。
 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <style>
        body{
              margin: 600px;
              animation:xxx 1.5s infinite;  
        }
        .zuoxin, .youxin{
            width: 60px;
            height: 100px;
            background-color: blue;
            display: inline-block;
            border-top-left-radius: 60px;
            border-top-right-radius: 60px;
        }
        .zuoxin{
            transform:translateX(35px) rotateZ(-45deg);
        }
        .youxin{
            transform:rotateZ(45deg);
        }
        @keyframes xxx {
            50% { transform:scale(2);}
            100% {transform:scale(1);}
        }
            
    </style>
    <body>
		<div style = "text-align:center">
            <div class="zuoxin"></div>
            <div class="youxin"></div>
		</div>
    </body>
</html>