我正在尝试使用CSS为简单的SVG自卸汽车制作动画。卡车应升降床。
为此，我向包含卡车底盘的docs/_templates/layout.html标签添加了一个类，然后添加了针对该组的css动画。床处于正确的位置，但是只要我使用{% extends '!layout.html' %}
{% block document %}
{{super()}}
<a href="https://github.com/you">
<img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub">
</a>
{% endblock %}
属性为其定型，其位置就会被拧紧。
我尝试过使用<g>和transform，因为大多数其他答案都建议使用它们，但我无法用这种方法来解决。
如何固定它以旋转床并使它与卡车的车身保持水平？
您可以在这里看到它：https://codepen.io/berlinquin/pen/VVWmNr
transform-boxtransform-origin
答案 0 :(得分：2)
有一个您被新转换覆盖的转换，您应该将其包括在动画中：
@keyframes drive-truck {
0% {
left: -210px;
}
70% {
left: 70%;
}
90% {
left: 70%;
}
100% {
left: 100%;
}
}
@keyframes dump-load {
0% {
transform: translate(-9.8677083px,-119.84723px);
}
40% {
transform: translate(-9.8677083px,-119.84723px) rotate(-20deg) ;
}
60% {
transform: translate(-9.8677083px,-119.84723px) rotate(-20deg) ;
}
100% {
transform: translate(-9.8677083px,-119.84723px)
}
}
#truck-container {
width: 100%;
overflow: hidden;
}
#truck-container .wrapper {
position: relative;
top: 0;
/* left: -210px; */
width: 200px;
/*animation: drive-truck 5s linear infinite; */
}
#truck-container object {
width: 200px;
}
#truck-container svg {
width: 200px;
}
g.truck-bed {
transform-origin: 14.3% 100%;
transform-box: fill-box;
animation: dump-load 5s linear infinite;
}<div id="truck-container">
<div class="wrapper">
<!-- <object type="image/svg+xml" data="full-truck-plain.svg"></object> -->
<svg
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
id="svg8"
version="1.1"
viewBox="0 0 210.26479 80.152405"
height="80.152405mm"
width="210.26479mm">
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow1Lend"
refX="0"
refY="0"
orient="auto">
<path
transform="matrix(-0.8,0,0,-0.8,-10,0)"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path6731" />
</marker>
<marker
style="overflow:visible"
id="Arrow1Lstart"
refX="0"
refY="0"
orient="auto">
<path
transform="matrix(0.8,0,0,0.8,10,0)"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path6728" />
</marker>
<linearGradient
id="wheel-3">
<stop
style="stop-color:#090000;stop-opacity:0;"
offset="0"
id="stop6086" />
<stop
id="stop6098"
offset="0"
style="stop-color:#090000;stop-opacity:0.49803922;" />
<stop
style="stop-color:#090000;stop-opacity:1;"
offset="1"
id="stop6084" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient6054">
<stop
id="stop6052"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient6032">
<stop
id="stop6030"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient5958">
<stop
id="stop5956"
offset="0"
style="stop-color:#4d4d4d;stop-opacity:1;" />
</linearGradient>
<linearGradient
id="linearGradient5950">
<stop
id="stop5948"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<radialGradient
gradientTransform="matrix(0.5,0,0,0.5,-129.99981,138.49981)"
gradientUnits="userSpaceOnUse"
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
id="radialGradient6090"
xlink:href="#wheel-3" />
<radialGradient
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
gradientTransform="matrix(0.5,0,0,0.5,-159.99981,138.49981)"
gradientUnits="userSpaceOnUse"
id="radialGradient6722"
xlink:href="#wheel-3" />
<radialGradient
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
gradientTransform="matrix(0.5,0,0,0.5,-309.99981,138.49981)"
gradientUnits="userSpaceOnUse"
id="radialGradient6726"
xlink:href="#wheel-3" />
</defs>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
style="display:inline"
transform="translate(-9.8677083,-206.84723)"
id="layer1">
<path
id="rect6676"
d="m 209.87461,266.99314 v 0.13643 a 9.8768147,9.8768147 0 0 0 -9.75134,9.8702 9.8768147,9.8768147 0 0 0 5.3e-4,0.007 H 69.87697 a 9.8768147,9.8768147 0 0 0 0,-0.007 9.8768147,9.8768147 0 0 0 -9.87691,-9.8764 9.8768147,9.8768147 0 0 0 -9.87692,9.8764 9.8768147,9.8768147 0 0 0 5.3e-4,0.007 H 39.87675 a 9.8768147,9.8768147 0 0 0 0,-0.007 9.8768147,9.8768147 0 0 0 -9.75134,-9.87175 v -0.13488 z"
style="display:inline;fill:#4d4d4d;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
<circle
r="9.8768148"
cy="276.99982"
cx="-209.99982"
id="circle6724"
style="display:inline;opacity:1;fill:url(#radialGradient6726);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
transform="scale(-1,1)" />
<circle
style="display:inline;opacity:1;fill:url(#radialGradient6722);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
id="circle6720"
cx="-59.999817"
cy="276.99982"
r="9.8768148"
transform="scale(-1,1)" />
<circle
r="9.8768148"
cy="276.99982"
cx="-29.999817"
id="circle6655"
style="display:inline;opacity:1;fill:url(#radialGradient6090);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
transform="scale(-1,1)" />
<path
id="path6058"
d="m 30,268 c 0,-6 0,-6 0,-6 z"
style="display:inline;fill:none;stroke:#000000;stroke-width:3;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" />
</g>
<g
transform="translate(-9.8677083,-119.84723)"
style="display:inline"
id="layer2">
<path
id="path6679"
d="m 220,180 v -30 h -30 l -10,-20 h -20 v 50 h 40 c 5,-5 15,-5 20,0 z"
style="display:inline;fill:#b6b6b6;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path5324"
d="m 185,150 h -20 v -15 h 12.5 z"
style="display:inline;fill:#286ad5;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
</g>
<g
class="truck-bed"
transform="translate(-9.8677083,-119.84723)"
style="display:inline"
id="layer3">
<path
id="path5327"
d="m 140,175 v -35 h 10 V 120 L 10,140 v 35 z"
style="fill:#ea7e14;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
</g>
</svg>
</div>
</div>
或者考虑另一个g元素，您可以在其中应用旋转，而无需在动画中包含平移：
@keyframes drive-truck {
0% {
left: -210px;
}
70% {
left: 70%;
}
90% {
left: 70%;
}
100% {
left: 100%;
}
}
@keyframes dump-load {
0% {
transform: none;
}
40% {
transform: rotate(-20deg) ;
}
60% {
transform: rotate(-20deg) ;
}
100% {
transform: none
}
}
#truck-container {
width: 100%;
overflow: hidden;
}
#truck-container .wrapper {
position: relative;
top: 0;
/* left: -210px; */
width: 200px;
/*animation: drive-truck 5s linear infinite; */
}
#truck-container object {
width: 200px;
}
#truck-container svg {
width: 200px;
}
g.truck-bed {
transform-origin: 14.3% 100%;
transform-box: fill-box;
animation: dump-load 5s linear infinite;
}<div id="truck-container">
<div class="wrapper">
<!-- <object type="image/svg+xml" data="full-truck-plain.svg"></object> -->
<svg
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
id="svg8"
version="1.1"
viewBox="0 0 210.26479 80.152405"
height="80.152405mm"
width="210.26479mm">
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow1Lend"
refX="0"
refY="0"
orient="auto">
<path
transform="matrix(-0.8,0,0,-0.8,-10,0)"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path6731" />
</marker>
<marker
style="overflow:visible"
id="Arrow1Lstart"
refX="0"
refY="0"
orient="auto">
<path
transform="matrix(0.8,0,0,0.8,10,0)"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path6728" />
</marker>
<linearGradient
id="wheel-3">
<stop
style="stop-color:#090000;stop-opacity:0;"
offset="0"
id="stop6086" />
<stop
id="stop6098"
offset="0"
style="stop-color:#090000;stop-opacity:0.49803922;" />
<stop
style="stop-color:#090000;stop-opacity:1;"
offset="1"
id="stop6084" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient6054">
<stop
id="stop6052"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient6032">
<stop
id="stop6030"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<linearGradient
osb:paint="solid"
id="linearGradient5958">
<stop
id="stop5956"
offset="0"
style="stop-color:#4d4d4d;stop-opacity:1;" />
</linearGradient>
<linearGradient
id="linearGradient5950">
<stop
id="stop5948"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
</linearGradient>
<radialGradient
gradientTransform="matrix(0.5,0,0,0.5,-129.99981,138.49981)"
gradientUnits="userSpaceOnUse"
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
id="radialGradient6090"
xlink:href="#wheel-3" />
<radialGradient
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
gradientTransform="matrix(0.5,0,0,0.5,-159.99981,138.49981)"
gradientUnits="userSpaceOnUse"
id="radialGradient6722"
xlink:href="#wheel-3" />
<radialGradient
r="10"
fy="277"
fx="200"
cy="277"
cx="200"
gradientTransform="matrix(0.5,0,0,0.5,-309.99981,138.49981)"
gradientUnits="userSpaceOnUse"
id="radialGradient6726"
xlink:href="#wheel-3" />
</defs>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
style="display:inline"
transform="translate(-9.8677083,-206.84723)"
id="layer1">
<path
id="rect6676"
d="m 209.87461,266.99314 v 0.13643 a 9.8768147,9.8768147 0 0 0 -9.75134,9.8702 9.8768147,9.8768147 0 0 0 5.3e-4,0.007 H 69.87697 a 9.8768147,9.8768147 0 0 0 0,-0.007 9.8768147,9.8768147 0 0 0 -9.87691,-9.8764 9.8768147,9.8768147 0 0 0 -9.87692,9.8764 9.8768147,9.8768147 0 0 0 5.3e-4,0.007 H 39.87675 a 9.8768147,9.8768147 0 0 0 0,-0.007 9.8768147,9.8768147 0 0 0 -9.75134,-9.87175 v -0.13488 z"
style="display:inline;fill:#4d4d4d;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
<circle
r="9.8768148"
cy="276.99982"
cx="-209.99982"
id="circle6724"
style="display:inline;opacity:1;fill:url(#radialGradient6726);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
transform="scale(-1,1)" />
<circle
style="display:inline;opacity:1;fill:url(#radialGradient6722);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
id="circle6720"
cx="-59.999817"
cy="276.99982"
r="9.8768148"
transform="scale(-1,1)" />
<circle
r="9.8768148"
cy="276.99982"
cx="-29.999817"
id="circle6655"
style="display:inline;opacity:1;fill:url(#radialGradient6090);fill-opacity:1;fill-rule:nonzero;stroke:#090000;stroke-width:0.5;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:0"
transform="scale(-1,1)" />
<path
id="path6058"
d="m 30,268 c 0,-6 0,-6 0,-6 z"
style="display:inline;fill:none;stroke:#000000;stroke-width:3;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" />
</g>
<g
transform="translate(-9.8677083,-119.84723)"
style="display:inline"
id="layer2">
<path
id="path6679"
d="m 220,180 v -30 h -30 l -10,-20 h -20 v 50 h 40 c 5,-5 15,-5 20,0 z"
style="display:inline;fill:#b6b6b6;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path5324"
d="m 185,150 h -20 v -15 h 12.5 z"
style="display:inline;fill:#286ad5;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
</g>
<g class="truck-bed"><g
transform="translate(-9.8677083,-119.84723)"
style="display:inline"
id="layer3">
<path
id="path5327"
d="m 140,175 v -35 h 10 V 120 L 10,140 v 35 z"
style="fill:#ea7e14;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.01249981;stroke-dasharray:none;stroke-opacity:1" />
</g></g>
</svg>
</div>
</div>