translate3d - 題不知

translate3d

translate3d() - CSS: カスケーディングスタイルシート | MDN

https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/issac-37765679/translate3d/c.svg

code:c.svg

<svg width="99" height="99" viewBox="0 0 4 4" xmlns="http://www.w3.org/2000/svg">

<style>

@keyframes translate3dAnimation {

0% { transform: translate3d(0px, 0px, 0); }

50% { transform: translate3d(0px, 2px, 10px); }

100% { transform: translate3d(5px, 2px, 10px); }

}

animation: translate3dAnimation 5s linear infinite;

transform-origin: center center; /* Specify the origin of skew */

}

</style>

<g id="rect">

<rect x="1" y="0" width="1" height="1" fill="#5c89c0"/>

<rect x="2" y="0" width="1" height="1" fill="#e4d7b5"/>

<rect x="0" y="1" width="1" height="1" fill="#9cbce3"/>

<rect x="1" y="1" width="1" height="1" fill="#6e733b"/>

<rect x="2" y="1" width="1" height="1" fill="#BDC1C6"/>

<rect x="3" y="1" width="1" height="1" fill="#1F1E33"/>

<rect x="0" y="2" width="1" height="1" fill="#BBBCDE"/>

<rect x="1" y="2" width="1" height="1" fill="#C58AF9"/>

<rect x="2" y="2" width="1" height="1" fill="#9E5232"/>

<rect x="3" y="2" width="1" height="1" fill="#efe5e4"/>

<rect x="1" y="3" width="1" height="1" fill="#d5ab5e"/>

<rect x="2" y="3" width="1" height="1" fill="#cf2d2b"/>

</g>

</svg>

https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/issac-37765679/translate3d/s.svg

code:s.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="210px" height="160px" viewBox="0,0,630,480">

transform: translate3d(0);

<style>

@keyframes translateAnimation {

20% { transform: translate3d(0px, 100%, 0); }

50% { transform: translate3d(0px, -100%, -2000px); }

80% { transform: translate3d(-200px, 100%, 0); }

}

animation: translateAnimation 5s linear infinite;

transform-origin: center center; /* Specify the origin of skew */

}

animation: translateAnimation 5s linear infinite;

transform-origin: center right; /* Specify the origin of skew */

}

animation: translateAnimation 5s linear infinite;

transform-origin: center center; /* Specify the origin of skew */

}

</style>

<g id="pillar">

<rect x="0" y="0" width="91px" height="320px" fill="#b4b4b4"/>

<rect x="90" y="0" width="91px" height="320px" fill="#b4b40c"/>

<rect x="180" y="0" width="91px" height="320px" fill="#0db4b4"/>

<rect x="270" y="0" width="91px" height="320px" fill="#0db40c"/>

<rect x="360" y="0" width="91px" height="320px" fill="#b410b4"/>

<rect x="450" y="0" width="91px" height="320px" fill="#b40f0e"/>

<rect x="540" y="0" width="91px" height="320px" fill="#0f0fb4"/>

</g>

<g id="brick">

<rect x="0" y="320" width="91px" height="40px" fill="#0f0fb4"/>

<rect x="90" y="320" width="91px" height="40px" fill="#101010"/>

<rect x="180" y="320" width="91px" height="40px" fill="#b410b4"/>

<rect x="270" y="320" width="91px" height="40px" fill="#101010"/>

<rect x="360" y="320" width="91px" height="40px" fill="#0db4b4"/>

<rect x="450" y="320" width="91px" height="40px" fill="#101010"/>

<rect x="540" y="320" width="91px" height="40px" fill="#b4b4b4"/>

</g>

<g id="footer">

<rect x="0" y="360" width="113px" height="120px" fill="#081d42"/>

<rect x="113" y="360" width="113px" height="120px" fill="#ebebeb"/>

<rect x="226" y="360" width="113px" height="120px" fill="#2c005c"/>

<rect x="339" y="360" width="114px" height="120px" fill="#101010"/>

<rect x="450" y="360" width="31px" height="120px" fill="#070707"/>

<rect x="480" y="360" width="31px" height="120px" fill="#101010"/>

<rect x="510" y="360" width="31px" height="120px" fill="#181818"/>

<rect x="539" y="360" width="91px" height="120px" fill="#101010"/>

</g>

</svg>

2023-08-28 22:07