צור מדפסת 3D CSS שבאמת מדפיסה!

מדריכים
HTML5 JavaScript

למשך זמן מה, יצרתי תמונות תלת ממדיות באמצעות CSS בשביל הכיף – בדרך כלל בשידור חי שלי live stream.

כל הדגמה היא הזדמנות לנסות משהו שונה או לחשוב על דרכים לעשות דברים באמצעות CSS. דבר אחד שאני עושה לעתים קרובות הוא לקחת הצעות למה שעלינו לנסות ליצור בשידור. הצעה לאחרונה היתה מכונת מדפסת שמדפיסה ב-"3D". והנה מה שהכנסתי יחד!

יצירת דברים תלת ממדיים באמצעות CSS

I’ve written about making things 3D with CSS before. The general gist is that most scenes are a composition of cuboids.

כדי ליצור קובייה, אנו יכולים להשתמש בטרנספורמציות CSS כדי למקם את הצדדים של קובייה – התכונה הקסומה היא transform-style. הגדרת זאת כ preserve-3d מאפשרת לנו לשנות את האלמנטים בממד השלישי:

* {
  transform-style: preserve-3d;
}

לאחר שאתה יוצר מספר מהסצנות הללו, אתה מתחיל להרגיש איך להאיץ את התהליך. אני אוהב להשתמש ב-Pug כמהדר קוד HTML. היכולת לעשות מיקסינים נותנת לי דרך ליצור קוביות מהירה יותר. הדוגמאות לתבנית בספר הזה משתמשות ב-Pug. אך עבור כל דמו של CodePen אתה יכול להשתמש באפשרות "צפייה ב-HTML המוצג" כדי לראות את תוצאת ה-HTML:

mixin cuboid()
  .cuboid(class!=attributes.class)
    - let s = 0
    while s < 6
      .cuboid__side
      - s++

השימוש ב-+cuboid()(class="printer__top") ייצור זה:

<div class="cuboid printer__top">
  <div class="cuboid__side"></div>
  <div class="cuboid__side"></div>
  <div class="cuboid__side"></div>
  <div class="cuboid__side"></div>
  <div class="cuboid__side"></div>
  <div class="cuboid__side"></div>
</div>

לאחר מכן יש לי קובץ CSS מוגבל שאני משתמש בו לפריסת הקוביות. השמחה כאן היא שאנו יכולים לנצל מאפיינים מותאמים אישית של CSS להגדרת המאפיינים של קובייה (כפי שמוצג בסרטון לעיל):

.cuboid {
  // Defaults
  --width: 15;
  --height: 10;
  --depth: 4;
  height: calc(var(--depth) * 1vmin);
  width: calc(var(--width) * 1vmin);
  transform-style: preserve-3d;
  position: absolute;
  font-size: 1rem;
  transform: translate3d(0, 0, 5vmin);
}
.cuboid > div:nth-of-type(1) {
  height: calc(var(--height) * 1vmin);
  width: 100%;
  transform-origin: 50% 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateX(-90deg) translate3d(0, 0, calc((var(--depth) / 2) * 1vmin));
}
.cuboid > div:nth-of-type(2) {
  height: calc(var(--height) * 1vmin);
  width: 100%;
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%) rotateX(-90deg) rotateY(180deg) translate3d(0, 0, calc((var(--depth) / 2) * 1vmin));
  position: absolute;
  top: 50%;
  left: 50%;
}
.cuboid > div:nth-of-type(3) {
  height: calc(var(--height) * 1vmin);
  width: calc(var(--depth) * 1vmin);
  transform: translate(-50%, -50%) rotateX(-90deg) rotateY(90deg) translate3d(0, 0, calc((var(--width) / 2) * 1vmin));
  position: absolute;
  top: 50%;
  left: 50%;
}
.cuboid > div:nth-of-type(4) {
  height: calc(var(--height) * 1vmin);
  width: calc(var(--depth) * 1vmin);
  transform: translate(-50%, -50%) rotateX(-90deg) rotateY(-90deg) translate3d(0, 0, calc((var(--width) / 2) * 1vmin));
  position: absolute;
  top: 50%;
  left: 50%;
}
.cuboid > div:nth-of-type(5) {
  height: calc(var(--depth) * 1vmin);
  width: calc(var(--width) * 1vmin);
  transform: translate(-50%, -50%) translate3d(0, 0, calc((var(--height) / 2) * 1vmin));
  position: absolute;
  top: 50%;
  left: 50%;
}
.cuboid > div:nth-of-type(6) {
  height: calc(var(--depth) * 1vmin);
  width: calc(var(--width) * 1vmin);
  transform: translate(-50%, -50%) translate3d(0, 0, calc((var(--height) / 2) * -1vmin)) rotateX(180deg);
  position: absolute;
  top: 50%;
  left: 50%;
}

באמצעות מאפיינים מותאמים אישית, אנו יכולים לשלוט במאפיינים שונים של הקוביות וכן הלאה:

  • --width: רוחב הקובייה על השטח
  • --height: גובה הקובייה על השטח
  • --depth: עומק הקובייה על השטח
  • --x: הערך X על השטח
  • --y: הערך Y על השטח

זה לא מרשים מאוד עד שאנו מכניסים את הקובייה לסצנה ומסובבים אותה. שוב, אני משתמש במאפיינים מותאמים אישית כדי לשנות את הסצנה תוך כדי שאני עובד על יצירת משהו. Dat.GUI מתחיל כאן.

אם אתה בודק את הדמו, באמצעות לוח הבקרה משתנים מאפיינים CSS מותאמים אישית על הסצנה. חשיפת מאפיינים CSS מותאמים אישית חוסכת הרבה קוד חזרתי ושומרת על דברים יבשים.

יותר מדרך אחת

כמו רבות מהדברים ב-CSS, יש יותר מדרך אחת לעשות זאת. לעתים קרובות אפשר להרכיב סצנה מקוביודים ולמקם דברים כשם שצריך. זה יכול להפוך למסובך לניהול אם כי. לעתים קרובות יש צורך לקבוצ דברים או להוסיף סוג כלשהו של מכל.

קחו בחשבון דוגמה זו שבה הכיסא הוא סצנה עצמאית שניתן להזיז.

רוב הדוגמאות האחרונות אינן מורכבות ככה. השתמשתי במשך הזמן בהתייחסות להתחדדות. זה אומר שאני יכול למפות כל מה שאני יוצר באלמנטים דו-מימדיים. לדוגמה, הנה מסוק שיצרתי לאחרונה:

.helicopter
  .helicopter__rotor
  .helicopter__cockpit
    .helicopter__base-light
    .helicopter__chair
      .helicopter__chair-back
      .helicopter__chair-bottom
    .helicopter__dashboard
  .helicopter__tail
  .helicopter__fin
    .helicopter__triblade
    .helicopter__tail-light
  .helicopter__stabilizer
  .helicopter__skids
    .helicopter__skid--left.helicopter__skid
    .helicopter__skid--right.helicopter__skid
  .helicopter__wing
    .helicopter__wing-light.helicopter__wing-light--left
    .helicopter__wing-light.helicopter__wing-light--right
  .helicopter__launchers
    .helicopter__launcher.helicopter__launcher--left
    .helicopter__launcher.helicopter__launcher--right
  .helicopter__blades

ואז אנו יכולים להוריד קוביודים לכל המכלים באמצעות ה-mixin. ואז ליישם "עובי" מושוע לכל קוביוד. העובי נקבע על ידי מאפיינים מותאמים אישית באופן מוגבל. הדוגמה הזו משנה את המאפיין --thickness עבור הקוביודים שמרכיבים את המסוק. זה נותן מושג לגבי איך נראה המיפוי הדו-מימדי בהתחלה.

זהו עיקרו של איך לעשות דברים תלת-מימדיים ב-CSS. חיפושים בקוד יחשפו כמה טריקים בוודאי. אבל, באופן כללי, לסכם סצנה, למלא בקוביודים, ולצבוע את הקוביודים. לעתים קרובות תרצה גורם מעט צבעים שונים כדי שנוכל להבחין בין הצדדים של קוביוד. כל פרט נוסף הוא מה שנוכל להוסיף לצד של קוביוד או הטמעות שנוכל ליישם לקוביוד. לדוגמה, סיבוב והזזה על ציר ה-Z.

בואו נחשוב על דוגמה פשוטה:

.scene
  .extrusion
    +cuboid()(class="extrusion__cuboid")

ה-CSS החדש ליצירת קוביוד עם התחדדות עשוי להיראות כך. שימו לב כיצד אנו כוללים מאפיינים מותאמים מקומית עבור הצבע של כל צד גם כן. כדאי להוריד כמה ערכים ברירת מחדל מתחת ל-:root כאן או ערכים מפל בכל מקרה:

.cuboid {
  width: 100%;
  height: 100%;
  position: relative;
}
.cuboid__side:nth-of-type(1) {
  background: var(--shade-one);
  height: calc(var(--thickness) * 1vmin);
  width: 100%;
  position: absolute;
  top: 0;
  transform: translate(0, -50%) rotateX(90deg);
}
.cuboid__side:nth-of-type(2) {
  background: var(--shade-two);
  height: 100%;
  width: calc(var(--thickness) * 1vmin);
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%) rotateY(90deg);
}
.cuboid__side:nth-of-type(3) {
  background: var(--shade-three);
  width: 100%;
  height: calc(var(--thickness) * 1vmin);
  position: absolute;
  bottom: 0;
  transform: translate(0%, 50%) rotateX(90deg);
}
.cuboid__side:nth-of-type(4) {
  background: var(--shade-two);
  height: 100%;
  width: calc(var(--thickness) * 1vmin);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%) rotateY(90deg);
}
.cuboid__side:nth-of-type(5) {
  background: var(--shade-three);
  height: 100%;
  width: 100%;
  transform: translate3d(0, 0, calc(var(--thickness) * 0.5vmin));
  position: absolute;
  top: 0;
  left: 0;
}
.cuboid__side:nth-of-type(6) {
  background: var(--shade-one);
  height: 100%;
  width: 100%;
  transform: translate3d(0, 0, calc(var(--thickness) * -0.5vmin)) rotateY(180deg);
  position: absolute;
  top: 0;
  left: 0;
}

בחרנו בשלושה גוונים לדוגמה זו. אך לפעמים אולי תצטרך יותר. הדגמה הזו מרכיבה את זה אך מאפשרת לך לשנות מאפיינים מותאמים אישית מסוימים. ערך ה"עובי" ישנה את ציפופו של הקובייה. השינויים והממדים ישפיעו על האלמנט המכיל עם המחלקה "התקפה".

מרקע למכונת דפוס

כדי להתחיל, אנו יכולים להריץ מרקע את כל החלקים שאנו זקוקים להם. עם תרגול זה הופך לברור יותר. אך הכלל הכללי הוא לנסות לדמיין הכול כקופסאות. זה נותן לך רעיון טוב איך לשבור משהו:

.scene
  .printer
    .printer__side.printer__side--left
    .printer__side.printer__side--right
    .printer__tray.printer__tray--bottom
    .printer__tray.printer__tray--top
    .printer__top
    .printer__back

ראה אם אפשר לדמיין מה אנו רוצים להשיג כאן. שני החלקים הצדדיים משאירים פער באמצע. לאחר מכן יש לנו קובייה אחת שנמצאת מעל ואחת שממלאת את האחור. ולאחר מכן שתי קוביות כדי להרכיב את מגרש הנייר.

ברגע שאתה בשלב זה, זו עניינים של מילוי הקוביות, שנראה כך:

.scene
  .printer
    .printer__side.printer__side--left
      +cuboid()(class="cuboid--side")
    .printer__side.printer__side--right
      +cuboid()(class="cuboid--side")
    .printer__tray.printer__tray--bottom
      +cuboid()(class="cuboid--tray")
    .printer__tray.printer__tray--top
      +cuboid()(class="cuboid--tray")
    .printer__top
      +cuboid()(class="cuboid--top")
    .printer__back
      +cuboid()(class="cuboid--back")

שים לב כיצד אנו יכולים לשמש מחדש את שמות המחלקות כגון cuboid--side. הקוביות האלה כנראה יהיו בעובי זהה וישתמשו באותם צבעים. מיקומם וגודלם נקבעים על ידי האלמנט המכיל.

כשמרכיבים את זה, אנו יכולים להשיג משהו כזה.

התפרצות הדגמה מראה את הקוביות השונות שמרכיבות את המכונת הדפוס. אם תכבה את ההתקפה, תוכל לראות את האלמנטים המכילים שטוחים.

הוספת פרטים

עכשיו, אולי שמתם לב שיש יותר פרטים מאשר רק על ידי הוספת צבעים לכל צד. וזה בא ממציאת דרכים להוסיף פרטים נוספים. יש לנו אפשרויות שונות תלוי במה אנו רוצים להוסיף.

אם זו תמונה או שינויים בצבעים בסיסיים, אנו יכולים להשתמש בbackground-image כדי לשתף גרדיאנטים וכד'.

לדוגמה, לחלק העליון של המדפסת יש פרטים, כמו גם את פתיחת המדפסת. הקוד הזה מתייחס לצד העליון של הקובייה העליונה. הגרדיאנט מטפל בפתיחת המדפסת והפרטים:

.cuboid--top {
  --thickness: var(--depth);
  --shade-one: linear-gradient(#292929, #292929) 100% 50%/14% 54% no-repeat, linear-gradient(var(--p-7), var(--p-7)) 40% 50%/12% 32% no-repeat, linear-gradient(var(--p-7), var(--p-7)) 30% 50%/2% 12% no-repeat, linear-gradient(var(--p-3), var(--p-3)) 0% 50%/66% 50% no-repeat, var(--p-1);
}

עבור הלוגו של הדוב, נוכל להשתמש בbackground-image או אפילו להגיע לאלמנט פסאודו ולמקם אותו:

.cuboid--top > div:nth-of-type(1):after {
  content: '';
  position: absolute;
  top: 7%;
  left: 10%;
  height: calc(var(--depth) * 0.12vmin);
  width: calc(var(--depth) * 0.12vmin);
  background: url("https://assets.codepen.io/605876/avatar.png");
  background-size: cover;
  transform: rotate(90deg);
  filter: grayscale(0.5);
}

אם נצטרך להוסיף פרטים נרחבים יותר, כנראה שנצטרך לצאת משימוש המיקסין שלנו בקובייה. לדוגמה, החלק העליון של המדפסת שלנו יש מסך תצוגה שמשתמשים באלמנט img:

.printer__top
  .cuboid.cuboid--top
    .cuboid__side
    .cuboid__side
    .cuboid__side
    .cuboid__side
      .screen
        .screen__preview
          img.screen__preview-img
    .cuboid__side
    .cuboid__side

הוספת פרטים נוספים ואנו מוכנים להכניס נייר לתמה!

מסע הנייר

מהי מדפסת ללא נייר? אנו רוצים להנפיץ נייר כלשהו לתוך המדפסת ולפלוט אותו מהקצה השני. משהו כמו הדמו זה: לחץ בכל מקום כדי לראות פיסת נייר שמוזגת לתוך המדפסת ומודפסת.

אנו יכולים להוסיף קובייה של נייר לסצנה ואז להשתמש באלמנט נפרד כדי לשמש כפיסת נייר בודדת:

.paper-stack.paper-stack--bottom
  +cuboid()(class="cuboid--paper")
.paper-stack.paper-stack--top
  .cuboid.cuboid--paper
    .cuboid__side
      .paper
        .paper__flyer
    .cuboid__side
    .cuboid__side
    .cuboid__side
    .cuboid__side
    .cuboid__side

אך הנפיצה של הנייר לתוך המדפסת דורשת ניסוי וטעייה. זה חוכם לשחק עם טרנספומציות שונות במפקח DevTools. זו דרך טובה לראות איך הדברים ייראו. לעתים קרובות, קל יותר להשתמש באלמנטים מעטפת גם כן. אנו משתמשים באלמנט .paper כדי לבצע את ההעברה ואז משתמשים ב.paper__flyer כדי להנפיץ את הנייר המוזג:

:root {
  --load-speed: 2;
}

.paper-stack--top .cuboid--paper .paper {
  animation: transfer calc(var(--load-speed) * 0.5s) ease-in-out forwards;
}
.paper-stack--top .cuboid--paper .paper__flyer {
  animation: fly calc(var(--load-speed) * 0.5s) ease-in-out forwards;
}
.paper-stack--top .cuboid--paper .paper__flyer:after {
  animation: feed calc(var(--load-speed) * 0.5s) calc(var(--load-speed) * 0.5s) forwards;
}

@keyframes transfer {
  to {
    transform: translate(0, -270%) rotate(22deg);
  }
}

@keyframes feed {
  to {
    transform: translate(100%, 0);
  }
}

@keyframes fly {
  0% {
    transform: translate3d(0, 0, 0) rotateY(0deg) translate(0, 0);
  }
  50% {
    transform: translate3d(140%, 0, calc(var(--height) * 1.2)) rotateY(-75deg) translate(180%, 0);
  }
  100% {
    transform: translate3d(140%, 0, var(--height)) rotateY(-75deg) translate(0%, 0) rotate(-180deg);
  }
}

תבחין שיש שימוש משמעותי בcalc שם. כדי להרכיב את ציר התנועה הממשקל, אנו יכולים להשתמש במאפיינים מותאמים אישית של CSS. על ידי התייחסות למאפיין, אנו יכולים לחשב את העיכובים הנכונים עבור כל תנועה בשרשרת. הנייר מועבר ומעופף בו זמנית. תנועה אחת מטפלת בהזזת המכל, ותנועה נוספת מטפלת בסיבוב הנייר. ברגע שהתנועות האלה מסתיימות, הנייר מוזרם למדפסת עם התנועה feed. העיכוב בתנועה שווה למשך זמן התנועות הראשונות שנפעלות בו זמנית.

הריצו את הדגמה הזו שבה צבעתי את רכיבי המכל באדום ובירוק. אנו משתמשים בפוסטו-אלמנט של .paper__flyer כדי לייצג את פיסת הנייר. אך רכיבי המכל עושים את העבודה הקשה:

אולי אתם תוהים מתי יצא הנייר מהקצה השני. אך למעשה, הנייר אינו אותו אלמנט כל הזמן. אנו משתמשים באלמנט אחד כדי להיכנס למדפסת. ואלמנט אחר עבור הנייר כשהוא עף מחוץ למדפסת. זו עוד מצב שבו אלמנטים נוספים מקלים עלינו.

הנייר משתמש ביותר מאלמנט אחד כדי לעשות את הלולאה, ואז הנייר מועמד לקצה של אותו אלמנט. הפעלת הדגמה זו עם רכיבי מכל צבועים יותר מראה איך זה עובד.

שוב, זה דורש קצת ניסוי וטעימה, כמו גם חשיבה על איך אנו יכולים לנצל את השימוש ברכיבי מכל. יש לנו מכל עם transform-origin מוסט שמאפשר לנו ליצור את הלולאה.

הדפסה

יש לנו הכול במקום. עכשיו זו עניינה של למעשה להדפיס משהו. כדי לעשות זאת, אנו נוסיף טופס המאפשר למשתמשים להעביר את כתובת ה-URL של תמונה:

form.customer-form
  label(for="print") Print URL
  input#print(type='url' required placeholder="URL for Printing")
  input(type="submit" value="Print")

עם קצת עיצוב, אנו מקבלים משהו כזה.

ההתנהגות הישותית של טפסים ושימוש ב-required ו-type="url" אומר שאנו מקבלים רק URL. יכולנו להרחיב את זה עם pattern ולבדוק עבור סוגים מסוימים של תמונות. אבל יש כמה כתובות מקור טובות לתמונות אקראיות אינן כוללות את סוג התמונה, כגון https://source.unsplash.com/random.

שליחת הטופס שלנו אינה מתנהגת כפי שאנו רוצים, וגם האנימציה של ההדפסה פועלת פעם אחת בזמן הטעינה. דרך להתמודד עם זה תהיה להריץ את האנימציה רק כאשר מחלקה מסוימת מופיעה על המדפסת.

כשאנו שולחים את הטופס, אנו יכולים לבצע בקשה ל-URL ואז לקבוע את ה-src לתמונות בסצנה שלנו – תמונה אחת היא התצוגה המקדימה על המדפסת, השנייה היא תמונה על צד אחד של הנייר. למעשה, כשאנו מדפיסים, אנו נוסיף יסוד חדש לכל חתיכת נייר שמודפסת. ככה, כל הדפסה נראית כאילו היא מוסיפה לערמה. אנו יכולים להסיר את חתיכת הנייר שיש לנו בזמן הטעינה.

בואו נתחיל בטיפול בשליחת הטופס. אנו הולכים למנוע את האירוע הברירתי ולקרוא לפונקציה PROCESS:

const PRINT = e => {
  e.preventDefault()
  PROCESS()
}

const PRINT_FORM = document.querySelector('form')
PRINT_FORM.addEventListener('submit', PRINT)

פונקציה זו תטפל בבקשה למקור התמונה שלנו:

let printing = false

const PREVIEW = document.querySelector('img.screen__preview-img')
const SUBMIT = document.querySelector('[type="submit"]')
const URL_INPUT = document.querySelector('[type="url"]')

const PROCESS = async () => {
  if (printing) return
  printing = true
  SUBMIT.disabled = true
  const res = await fetch(URL_INPUT.value)
  PREVIEW.src = res.url
  URL_INPUT.value = ''
}

גם הגדרנו משתנה printing ל-true, שנשתמש בו לקידוד המצב הנוכחי ולהשהיית כפתור הטופס.

למה אנו עושים בקשה לתמונה במקום לקבוע אותה על התמונה? אנו רוצים URL מוחלט לתמונה. אם נשתמש ב-URL של "Unsplash" שהוזכר לעיל ואז נשתף אותו בין התמונות, זה עשוי לא לעבוד. זה משום שאנו עשויים להיתקל בתרחישים שבהם יש תמונות שונות מוצגות.

ברגע שיש לנו את מקור התמונה, אנו קובעים את מקור התמונה התצוגתית לכך URL ומאפסים את ערך קלט הטופס.

כדי לעורר את האנימציה, אנו יכולים להתחבר לאירוע "טעינה" של התמונה התצוגתית שלנו. כשהאירוע מתפרץ, אנו יוצרים רכיב חדש לחתיכת הנייר שיתוכן ומחברים אותו לאלמנט printer. באותו זמן, אנו מוסיפים מחלקה printing למכונת הדפסה שלנו. אנו יכולים להשתמש בזה כדי לעורר את החלק הראשון של האנימציה של הנייר:

PREVIEW.addEventListener('load', () => {
  PRINTER.classList.add('printing')
  const PRINT = document.createElement('div')
  PRINT.className = 'printed'
  PRINT.innerHTML = `
    <div class="printed__spinner">
      <div class="printed__paper">
        <div class="printed__papiere">
          <img class="printed__image" src=${PREVIEW.src}/>
        </div>
      </div>
      <div class="printed__paper-back"></div>
    </div>
  `
  PRINTER.appendChild(PRINT)
  // לאחר כמות נתונה של זמן נאפס את המצב
  setTimeout(() => {
    printing = false
    SUBMIT.removeAttribute('disabled')
    PRINTER.classList.remove('printing')
  }, 4500)
})

לאחר כמות נתונה של זמן, אנו יכולים לאפס את המצב. גישה חלופית תהיה לבצע debounce של אירוע animationend מתפשט. אך אנו יכולים להשתמש ב-setTimeout, כפי שאנו יודעים כמה זמן האנימציה תימשך.

הדפסתנו אינה בקנה המידה הנכון. זה משום שעלינו למעקם את התמונה לקנה המידה של חתיכת הנייר. אנו זקוקים לקצת CSS למטרה זו:

.printed__image {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

זה גם יהיה נחמד אם האורות בחלק הקדמי של המכונת הדפסה יתקשרו כי המכונה עסוקה. נוכל לשנות את הגוון של אחת האורות כשהמכונה מדפיסה:

.progress-light {
  background: hsla(var(--progress-hue, 104), 80%, 50%);
}
.printing {
  --progress-hue: 10; /* משקף את הצבע האדום */
}

השלבתי את כל זה וקיבלנו מדפסת "משומשת" שנעשתה עם CSS ומעט מאוד JavaScript.

זהו!

בחנו איך ניתן ליצור מדפסת תלת מימד פונקציונלית עם CSS, מעט מאוד JavaScript ובשימוש ב-Pug. נסו להוסיף את קישור התמונה הבא בשדה הכתובת, או קישור אחר שלכם, ותנו לזה לנוע!

https://source.unsplash.com/random

כיסינו מגוון רחב של דברים כדי להשיג זאת, כולל אלה:

  • איך ליצור דברים תלת מימדיים עם CSS
  • שימוש ב-Pug mixins
  • שימוש במאפייני CSS מותאמים אישית בסקופי כדי לשמור על דברים יפים
  • שימוש בהוצאה ליצירת סצנות תלת מימדיות
  • טיפול בטפרים עם JavaScript
  • הרכבת צירי זמן אנימציה עם מאפיינים מותאמים אישית

העונג ביצירת הדמויות האלה הוא שרבים מהם מציבים בעיות שונות להתגבר עליהן, כגון איך ליצור צורות מסוימות או לבנות אנימציות מסוימות. לעתים קרובות יש יותר מדרך אחת לעשות משהו.

מה דברים מגניבים ניתן ליצור עם CSS תלת מימד? הייתי שמח לראות!

כמו תמיד, תודה שקראתם. רוצים לראות יותר? בואו למצוא אותי ב-טוויטר או תצפו ב-זרימת חיים!

שאלות שונות שנשאלו (FAQs) על מדפסת CSS תלת מימד

מהו מדפסת CSS תלת מימד?

A 3D CSS Printer is a unique concept that uses Cascading Style Sheets (CSS), a style sheet language used for describing the look and formatting of a document written in HTML, to create a 3D representation of a printer. This innovative approach allows developers to create interactive and visually appealing web elements that can enhance user experience.

איך מדפסת CSS תלת מימד פועלת?

A 3D CSS Printer works by using CSS properties to create a 3D model of a printer. It uses properties such as transform, perspective, and animation to create the 3D effect. The printer is made up of multiple elements, each styled and positioned to create the overall 3D effect. The animation property is then used to create the printing effect.

האם אני יכול להתאים את מדפסת CSS תלת מימד?

כן, אפשר להתאים את המכונה ה-3D של CSS. אפשר לשנות את הצבעים, הגודל ואפילו את מהירות התנועה. זה נעשה על ידי שינוי תכונות ה-CSS של המכונה. לדוגמה, אפשר לשנות את הצבע על ידי שינוי תכונת ה-background-color של האלמנטים של המכונה.

איך אפשר לשלב מכונה 3D של CSS באתר שלי?

שילוב מכונה 3D של CSS באתר שלך כולל העתקת הקוד ה-CSS וה-HTML לקוד האתר שלך. עליך לוודא שהקוד ה-CSS מופיע בחלק הראשי של המסמך ה-HTML שלך, והקוד ה-HTML מופיע במקום שבו אתה רוצה שהמכונה תופיע בדף האינטרנט שלך.

האם אפשר להנפיש את המכונה ה-3D של CSS?

כן, אפשר להנפיש את המכונה ה-3D של CSS. ההנפש מתבצעת באמצעות תכונת ה-animation של CSS. תכונה זו מאפשרת לך ליצור פרוסופטות שמגדירות את המצבים ההתחלתי והסופי של ההנפש, כמו גם כל צעדים ביניים.

באילו דפדפנים עובדת המכונה ה-3D של CSS?

המכונה ה-3D של CSS צריכה לעבוד בכל הדפדפנים המודרניים שתומכים בתכונות ה-CSS של transform ו-animation. זה כולל דפדפנים כמו Google Chrome, Mozilla Firefox, Safari ו-Microsoft Edge.

האם אפשר להשתמש במכונה 3D של CSS למטרות מסחריות?

כן, אפשר להשתמש במכונה 3D של CSS למטרות מסחריות. עם זאת, כדאי תמיד לבדוק את תנאי הרישיון של כל קוד שאתה משתמש בו כדי לוודא שאתה מסכים.

איזה כישורים נדרשים כדי ליצור מכונה 3D של CSS?

ליצירת מדפסת CSS תלת מימדית, אתה זקוק להבנה טובה של HTML ו-CSS. אתה צריך להכיר באפינויות CSS כמו שינוי, פרספקטיבה ואנימציה. ידע בסיסי בעיצוב תלת מימד יכול גם להיות מועיל, אך זה לא הכרחי.

האם אפשר להשתמש ב-JavaScript עם מדפסת CSS תלת מימדית?

כן, אפשר להשתמש ב-JavaScript עם מדפסת CSS תלת מימדית. בעוד שאפשר ליצור את המדפסת רק באמצעות CSS, JavaScript יכול לשמש להוספת אינטראקטיביות, כגון התחלה או עצירה של האנימציה על פי פעולות המשתמש.

האם יש משאבים ללמוד עוד על מדפסת CSS תלת מימדית?

יש הרבה משאבים מקוונים ללמידה על מדפסת CSS תלת מימדית. אתרים כמו SitePoint, CSS-Tricks ו-MDN Web Docs מציעים מדריכים ומדריכים מקיפים על אנימציות CSS ושינויים תלת מימדיים. ב-YouTube יש גם מדריכים וידאו רבים בנושא.

Source:
https://www.sitepoint.com/3d-css-printer/