如何为 SVG 的某些部分设置动画
How to animate some part of an SVG
我有一个看起来像这样的 SVG
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M405 5109 c-194 -28 -367 -205 -395 -404 -13 -92 -13 -1000 0 -1090
12 -78 47 -162 91 -217 l29 -37 -33 -44 c-45 -59 -75 -133 -87 -214 -13 -89
-13 -997 0 -1086 12 -81 42 -155 87 -214 l33 -43 -33 -43 c-45 -59 -75 -133
-87 -214 -13 -88 -13 -997 0 -1088 29 -204 201 -376 405 -405 42 -6 427 -10
948 -10 l877 0 0 160 0 160 -907 0 c-888 0 -909 1 -941 20 -18 11 -41 34 -52
52 -19 32 -20 52 -20 568 0 516 1 536 20 568 11 18 34 41 52 52 32 19 53 20
941 20 l907 0 0 160 0 160 -907 0 c-888 0 -909 1 -941 20 -18 11 -41 34 -52
52 -19 32 -20 52 -20 568 0 516 1 536 20 568 11 18 34 41 52 52 33 20 55 20
1848 20 1793 0 1815 0 1848 -20 59 -36 72 -71 72 -192 l0 -108 160 0 160 0 0
78 c-1 163 -33 279 -101 364 l-29 37 33 44 c45 59 75 133 87 214 13 88 13 997
0 1088 -29 204 -201 376 -405 405 -88 12 -3574 11 -3660 -1z m3683 -329 c18
-11 41 -34 52 -52 19 -32 20 -52 20 -568 0 -516 -1 -536 -20 -568 -11 -18 -34
-41 -52 -52 -33 -20 -55 -20 -1848 -20 -1793 0 -1815 0 -1848 20 -18 11 -41
34 -52 52 -19 32 -20 52 -20 568 0 516 1 536 20 568 11 18 34 41 52 52 33 20
55 20 1848 20 1793 0 1815 0 1848 -20z"/>
<path d="M760 4308 c-112 -31 -149 -170 -68 -255 105 -110 296 -3 256 145 -12
44 -60 98 -97 107 -14 3 -33 8 -41 9 -8 2 -31 0 -50 -6z"/>
<path d="M760 2708 c-112 -31 -149 -170 -68 -255 105 -110 296 -3 256 145 -12
44 -60 98 -97 107 -14 3 -33 8 -41 9 -8 2 -31 0 -50 -6z"/>
<g class="loading">
<path d="M3728 2550 c-549 -49 -1007 -450 -1133 -992 -24 -103 -34 -266 -24
-385 20 -258 119 -499 287 -705 l75 -90 110 110 110 110 -51 61 c-102 123
-176 276 -208 430 -22 114 -15 343 15 446 94 327 348 583 672 675 115 33 449
41 449 10 0 -4 -34 -52 -76 -105 -70 -90 -74 -98 -57 -110 10 -7 65 -49 123
-94 58 -44 108 -77 112 -73 4 4 96 124 206 267 l199 259 -106 48 c-254 116
-469 158 -703 138z"/>
<path d="M4636 2071 l-109 -109 52 -62 c102 -123 175 -275 206 -428 23 -114
17 -334 -13 -445 -41 -151 -153 -339 -263 -443 -111 -105 -275 -198 -416 -236
-118 -31 -443 -38 -443 -9 0 4 34 51 75 104 l75 97 -48 37 c-94 74 -192 148
-197 148 -3 0 -97 -119 -209 -265 l-203 -265 120 -53 c233 -103 363 -133 577
-133 149 0 262 16 385 56 452 148 788 531 871 995 20 113 20 330 -1 445 -35
194 -117 381 -241 545 -113 150 -92 148 -218 21z"/>
</g>
<path d="M760 1108 c-112 -31 -149 -170 -68 -255 105 -110 296 -3 256 145 -12
44 -60 98 -97 107 -14 3 -33 8 -41 9 -8 2 -31 0 -50 -6z"/>
</g>
</svg>
</body>
</html>
很抱歉之前的post没说清楚。
箭头位于图标的底部。当我尝试旋转箭头时，它会不规则地旋转并遍及整个屏幕。
谁能帮我制作 css 动画？。我想将这些箭头显示为连续旋转的箭头。
您可以使用这个旋转动画：
svg {
animation: rotate 1s infinite linear;
}
@keyframes rotate {
from {transform:rotate(0deg);}
to {transform:rotate(359deg);}
}
有关更多信息，请参阅 https://css-tricks.com/snippets/css/keyframe-animation-syntax/
您可以使用以下代码段解决您的问题。
<html>
<head>
<title></title>
<style>
.image {
-webkit-animation: spin 4s linear infinite;
-moz-animation: spin 4s linear infinite;
animation: spin 4s linear infinite;
}
@-moz-keyframes spin {
100% {
-moz-transform: rotate(360deg);
}
}
@-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="255.373px" height="255.51px" class="image" viewBox="0 0 255.373 255.51"
enable-background="new 0 0 255.373 255.51" xml:space="preserve">
<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)">
<path d="M1170.85,5105.209c-548.994-49.004-1007.002-450-1132.998-992.002c-24.004-102.998-33.999-265.996-24.004-385
c20-257.998,119.004-498.994,287.002-705l75-90l110,110l110,110l-50.996,61.006c-102.002,122.998-176.006,275.996-207.998,430
c-22.002,113.994-15,342.998,15,445.996c93.994,327.002,347.998,582.998,671.992,675c115,32.998,449.004,40.996,449.004,10
c0-4.004-34.004-52.002-75.996-105c-70-90-74.004-97.998-57.002-110c10-7.002,65-49.004,122.998-94.004
c57.998-43.994,107.998-76.992,112.002-72.998c3.994,4.004,95.996,124.004,205.996,267.002l199.004,259.004l-106.006,47.998
C1619.853,5083.208,1404.854,5125.209,1170.85,5105.209z" />
<path d="M2078.847,4626.206l-108.994-108.994l52.002-62.002c101.992-122.998,175-275,205.996-427.998
c22.998-114.004,17.002-334.004-12.998-445c-41.006-151.006-152.998-339.004-262.998-442.998
c-111.006-105-275-198.008-416.006-236.006c-117.998-30.996-442.998-37.998-442.998-8.994c0,3.994,34.004,50.996,75,103.994
l75,97.002l-47.998,37.002c-94.004,73.994-192.002,147.998-197.002,147.998c-2.998,0-97.002-119.004-209.004-265l-202.998-265
l120-52.998c232.998-102.998,362.998-133.003,577.002-133.003c149.004,0,262.002,16.001,385,56.001
c452.002,147.998,787.998,530.996,870.996,995c20,112.998,20,330-0.996,445c-35,194.004-117.002,380.996-240.996,545
C2183.847,4755.209,2204.853,4753.208,2078.847,4626.206z" />
</g>
</svg>
</body>
</html>
- 在
<g> 标签中包含要应用 CSS 动画的路径。
- 找到组件必须旋转的轴。
在上述情况下，路径被包围在一个正方形内，因此中心距顶部 50%，距左侧 50%。使用
transform-origin: 50% 50% 设置组件必须围绕其旋转的点。
.running {
transform-box: fill-box;
transform-origin: 50% 50%;
animation: spin 3s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(-360deg); }
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M405 5109 c-194 -28 -367 -205 -395 -404 -13 -92 -13 -1000 0 -1090
12 -78 47 -162 91 -217 l29 -37 -33 -44 c-45 -59 -75 -133 -87 -214 -13 -89
-13 -997 0 -1086 12 -81 42 -155 87 -214 l33 -43 -33 -43 c-45 -59 -75 -133
-87 -214 -13 -88 -13 -997 0 -1088 29 -204 201 -376 405 -405 42 -6 427 -10
948 -10 l877 0 0 160 0 160 -907 0 c-888 0 -909 1 -941 20 -18 11 -41 34 -52
52 -19 32 -20 52 -20 568 0 516 1 536 20 568 11 18 34 41 52 52 32 19 53 20
941 20 l907 0 0 160 0 160 -907 0 c-888 0 -909 1 -941 20 -18 11 -41 34 -52
52 -19 32 -20 52 -20 568 0 516 1 536 20 568 11 18 34 41 52 52 33 20 55 20
1848 20 1793 0 1815 0 1848 -20 59 -36 72 -71 72 -192 l0 -108 160 0 160 0 0
78 c-1 163 -33 279 -101 364 l-29 37 33 44 c45 59 75 133 87 214 13 88 13 997
0 1088 -29 204 -201 376 -405 405 -88 12 -3574 11 -3660 -1z m3683 -329 c18
-11 41 -34 52 -52 19 -32 20 -52 20 -568 0 -516 -1 -536 -20 -568 -11 -18 -34
-41 -52 -52 -33 -20 -55 -20 -1848 -20 -1793 0 -1815 0 -1848 20 -18 11 -41
34 -52 52 -19 32 -20 52 -20 568 0 516 1 536 20 568 11 18 34 41 52 52 33 20
55 20 1848 20 1793 0 1815 0 1848 -20z"/>
<path d="M760 4308 c-112 -31 -149 -170 -68 -255 105 -110 296 -3 256 145 -12
44 -60 98 -97 107 -14 3 -33 8 -41 9 -8 2 -31 0 -50 -6z"/>
<path d="M760 2708 c-112 -31 -149 -170 -68 -255 105 -110 296 -3 256 145 -12
44 -60 98 -97 107 -14 3 -33 8 -41 9 -8 2 -31 0 -50 -6z"/>
<g class="running">
<path d="M3728 2550 c-549 -49 -1007 -450 -1133 -992 -24 -103 -34 -266 -24
-385 20 -258 119 -499 287 -705 l75 -90 110 110 110 110 -51 61 c-102 123
-176 276 -208 430 -22 114 -15 343 15 446 94 327 348 583 672 675 115 33 449
41 449 10 0 -4 -34 -52 -76 -105 -70 -90 -74 -98 -57 -110 10 -7 65 -49 123
-94 58 -44 108 -77 112 -73 4 4 96 124 206 267 l199 259 -106 48 c-254 116
-469 158 -703 138z"/>
<path d="M4636 2071 l-109 -109 52 -62 c102 -123 175 -275 206 -428 23 -114
17 -334 -13 -445 -41 -151 -153 -339 -263 -443 -111 -105 -275 -198 -416 -236
-118 -31 -443 -38 -443 -9 0 4 34 51 75 104 l75 97 -48 37 c-94 74 -192 148
-197 148 -3 0 -97 -119 -209 -265 l-203 -265 120 -53 c233 -103 363 -133 577
-133 149 0 262 16 385 56 452 148 788 531 871 995 20 113 20 330 -1 445 -35
194 -117 381 -241 545 -113 150 -92 148 -218 21z"/>
</g>
<path d="M760 1108 c-112 -31 -149 -170 -68 -255 105 -110 296 -3 256 145 -12
44 -60 98 -97 107 -14 3 -33 8 -41 9 -8 2 -31 0 -50 -6z"/>
</svg>
</body>
</html>
注意：转换框在 Edge 或 IE 上不起作用，请参阅 https://developer.mozilla.org/en-US/docs/Web/CSS/transform-box 了解更多信息。
我有一个看起来像这样的 SVG
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M405 5109 c-194 -28 -367 -205 -395 -404 -13 -92 -13 -1000 0 -1090
12 -78 47 -162 91 -217 l29 -37 -33 -44 c-45 -59 -75 -133 -87 -214 -13 -89
-13 -997 0 -1086 12 -81 42 -155 87 -214 l33 -43 -33 -43 c-45 -59 -75 -133
-87 -214 -13 -88 -13 -997 0 -1088 29 -204 201 -376 405 -405 42 -6 427 -10
948 -10 l877 0 0 160 0 160 -907 0 c-888 0 -909 1 -941 20 -18 11 -41 34 -52
52 -19 32 -20 52 -20 568 0 516 1 536 20 568 11 18 34 41 52 52 32 19 53 20
941 20 l907 0 0 160 0 160 -907 0 c-888 0 -909 1 -941 20 -18 11 -41 34 -52
52 -19 32 -20 52 -20 568 0 516 1 536 20 568 11 18 34 41 52 52 33 20 55 20
1848 20 1793 0 1815 0 1848 -20 59 -36 72 -71 72 -192 l0 -108 160 0 160 0 0
78 c-1 163 -33 279 -101 364 l-29 37 33 44 c45 59 75 133 87 214 13 88 13 997
0 1088 -29 204 -201 376 -405 405 -88 12 -3574 11 -3660 -1z m3683 -329 c18
-11 41 -34 52 -52 19 -32 20 -52 20 -568 0 -516 -1 -536 -20 -568 -11 -18 -34
-41 -52 -52 -33 -20 -55 -20 -1848 -20 -1793 0 -1815 0 -1848 20 -18 11 -41
34 -52 52 -19 32 -20 52 -20 568 0 516 1 536 20 568 11 18 34 41 52 52 33 20
55 20 1848 20 1793 0 1815 0 1848 -20z"/>
<path d="M760 4308 c-112 -31 -149 -170 -68 -255 105 -110 296 -3 256 145 -12
44 -60 98 -97 107 -14 3 -33 8 -41 9 -8 2 -31 0 -50 -6z"/>
<path d="M760 2708 c-112 -31 -149 -170 -68 -255 105 -110 296 -3 256 145 -12
44 -60 98 -97 107 -14 3 -33 8 -41 9 -8 2 -31 0 -50 -6z"/>
<g class="loading">
<path d="M3728 2550 c-549 -49 -1007 -450 -1133 -992 -24 -103 -34 -266 -24
-385 20 -258 119 -499 287 -705 l75 -90 110 110 110 110 -51 61 c-102 123
-176 276 -208 430 -22 114 -15 343 15 446 94 327 348 583 672 675 115 33 449
41 449 10 0 -4 -34 -52 -76 -105 -70 -90 -74 -98 -57 -110 10 -7 65 -49 123
-94 58 -44 108 -77 112 -73 4 4 96 124 206 267 l199 259 -106 48 c-254 116
-469 158 -703 138z"/>
<path d="M4636 2071 l-109 -109 52 -62 c102 -123 175 -275 206 -428 23 -114
17 -334 -13 -445 -41 -151 -153 -339 -263 -443 -111 -105 -275 -198 -416 -236
-118 -31 -443 -38 -443 -9 0 4 34 51 75 104 l75 97 -48 37 c-94 74 -192 148
-197 148 -3 0 -97 -119 -209 -265 l-203 -265 120 -53 c233 -103 363 -133 577
-133 149 0 262 16 385 56 452 148 788 531 871 995 20 113 20 330 -1 445 -35
194 -117 381 -241 545 -113 150 -92 148 -218 21z"/>
</g>
<path d="M760 1108 c-112 -31 -149 -170 -68 -255 105 -110 296 -3 256 145 -12
44 -60 98 -97 107 -14 3 -33 8 -41 9 -8 2 -31 0 -50 -6z"/>
</g>
</svg>
</body>
</html>
很抱歉之前的post没说清楚。 箭头位于图标的底部。当我尝试旋转箭头时，它会不规则地旋转并遍及整个屏幕。
谁能帮我制作 css 动画？。我想将这些箭头显示为连续旋转的箭头。
您可以使用这个旋转动画：
svg {
animation: rotate 1s infinite linear;
}
@keyframes rotate {
from {transform:rotate(0deg);}
to {transform:rotate(359deg);}
}
有关更多信息，请参阅 https://css-tricks.com/snippets/css/keyframe-animation-syntax/
您可以使用以下代码段解决您的问题。
<html>
<head>
<title></title>
<style>
.image {
-webkit-animation: spin 4s linear infinite;
-moz-animation: spin 4s linear infinite;
animation: spin 4s linear infinite;
}
@-moz-keyframes spin {
100% {
-moz-transform: rotate(360deg);
}
}
@-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="255.373px" height="255.51px" class="image" viewBox="0 0 255.373 255.51"
enable-background="new 0 0 255.373 255.51" xml:space="preserve">
<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)">
<path d="M1170.85,5105.209c-548.994-49.004-1007.002-450-1132.998-992.002c-24.004-102.998-33.999-265.996-24.004-385
c20-257.998,119.004-498.994,287.002-705l75-90l110,110l110,110l-50.996,61.006c-102.002,122.998-176.006,275.996-207.998,430
c-22.002,113.994-15,342.998,15,445.996c93.994,327.002,347.998,582.998,671.992,675c115,32.998,449.004,40.996,449.004,10
c0-4.004-34.004-52.002-75.996-105c-70-90-74.004-97.998-57.002-110c10-7.002,65-49.004,122.998-94.004
c57.998-43.994,107.998-76.992,112.002-72.998c3.994,4.004,95.996,124.004,205.996,267.002l199.004,259.004l-106.006,47.998
C1619.853,5083.208,1404.854,5125.209,1170.85,5105.209z" />
<path d="M2078.847,4626.206l-108.994-108.994l52.002-62.002c101.992-122.998,175-275,205.996-427.998
c22.998-114.004,17.002-334.004-12.998-445c-41.006-151.006-152.998-339.004-262.998-442.998
c-111.006-105-275-198.008-416.006-236.006c-117.998-30.996-442.998-37.998-442.998-8.994c0,3.994,34.004,50.996,75,103.994
l75,97.002l-47.998,37.002c-94.004,73.994-192.002,147.998-197.002,147.998c-2.998,0-97.002-119.004-209.004-265l-202.998-265
l120-52.998c232.998-102.998,362.998-133.003,577.002-133.003c149.004,0,262.002,16.001,385,56.001
c452.002,147.998,787.998,530.996,870.996,995c20,112.998,20,330-0.996,445c-35,194.004-117.002,380.996-240.996,545
C2183.847,4755.209,2204.853,4753.208,2078.847,4626.206z" />
</g>
</svg>
</body>
</html>
- 在
<g>标签中包含要应用 CSS 动画的路径。 - 找到组件必须旋转的轴。
在上述情况下，路径被包围在一个正方形内，因此中心距顶部 50%，距左侧 50%。使用
transform-origin: 50% 50%设置组件必须围绕其旋转的点。
.running {
transform-box: fill-box;
transform-origin: 50% 50%;
animation: spin 3s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(-360deg); }
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M405 5109 c-194 -28 -367 -205 -395 -404 -13 -92 -13 -1000 0 -1090
12 -78 47 -162 91 -217 l29 -37 -33 -44 c-45 -59 -75 -133 -87 -214 -13 -89
-13 -997 0 -1086 12 -81 42 -155 87 -214 l33 -43 -33 -43 c-45 -59 -75 -133
-87 -214 -13 -88 -13 -997 0 -1088 29 -204 201 -376 405 -405 42 -6 427 -10
948 -10 l877 0 0 160 0 160 -907 0 c-888 0 -909 1 -941 20 -18 11 -41 34 -52
52 -19 32 -20 52 -20 568 0 516 1 536 20 568 11 18 34 41 52 52 32 19 53 20
941 20 l907 0 0 160 0 160 -907 0 c-888 0 -909 1 -941 20 -18 11 -41 34 -52
52 -19 32 -20 52 -20 568 0 516 1 536 20 568 11 18 34 41 52 52 33 20 55 20
1848 20 1793 0 1815 0 1848 -20 59 -36 72 -71 72 -192 l0 -108 160 0 160 0 0
78 c-1 163 -33 279 -101 364 l-29 37 33 44 c45 59 75 133 87 214 13 88 13 997
0 1088 -29 204 -201 376 -405 405 -88 12 -3574 11 -3660 -1z m3683 -329 c18
-11 41 -34 52 -52 19 -32 20 -52 20 -568 0 -516 -1 -536 -20 -568 -11 -18 -34
-41 -52 -52 -33 -20 -55 -20 -1848 -20 -1793 0 -1815 0 -1848 20 -18 11 -41
34 -52 52 -19 32 -20 52 -20 568 0 516 1 536 20 568 11 18 34 41 52 52 33 20
55 20 1848 20 1793 0 1815 0 1848 -20z"/>
<path d="M760 4308 c-112 -31 -149 -170 -68 -255 105 -110 296 -3 256 145 -12
44 -60 98 -97 107 -14 3 -33 8 -41 9 -8 2 -31 0 -50 -6z"/>
<path d="M760 2708 c-112 -31 -149 -170 -68 -255 105 -110 296 -3 256 145 -12
44 -60 98 -97 107 -14 3 -33 8 -41 9 -8 2 -31 0 -50 -6z"/>
<g class="running">
<path d="M3728 2550 c-549 -49 -1007 -450 -1133 -992 -24 -103 -34 -266 -24
-385 20 -258 119 -499 287 -705 l75 -90 110 110 110 110 -51 61 c-102 123
-176 276 -208 430 -22 114 -15 343 15 446 94 327 348 583 672 675 115 33 449
41 449 10 0 -4 -34 -52 -76 -105 -70 -90 -74 -98 -57 -110 10 -7 65 -49 123
-94 58 -44 108 -77 112 -73 4 4 96 124 206 267 l199 259 -106 48 c-254 116
-469 158 -703 138z"/>
<path d="M4636 2071 l-109 -109 52 -62 c102 -123 175 -275 206 -428 23 -114
17 -334 -13 -445 -41 -151 -153 -339 -263 -443 -111 -105 -275 -198 -416 -236
-118 -31 -443 -38 -443 -9 0 4 34 51 75 104 l75 97 -48 37 c-94 74 -192 148
-197 148 -3 0 -97 -119 -209 -265 l-203 -265 120 -53 c233 -103 363 -133 577
-133 149 0 262 16 385 56 452 148 788 531 871 995 20 113 20 330 -1 445 -35
194 -117 381 -241 545 -113 150 -92 148 -218 21z"/>
</g>
<path d="M760 1108 c-112 -31 -149 -170 -68 -255 105 -110 296 -3 256 145 -12
44 -60 98 -97 107 -14 3 -33 8 -41 9 -8 2 -31 0 -50 -6z"/>
</svg>
</body>
</html>
注意：转换框在 Edge 或 IE 上不起作用，请参阅 https://developer.mozilla.org/en-US/docs/Web/CSS/transform-box 了解更多信息。