چهارشنبه , ۷ تیر ۱۳۹۶
جدیدترین آموزش ها
خانه » فیلم آموزش CSS » فیلم آموزش رایگان CSS3 قسمت ۶۲(۳d transform)

فیلم آموزش رایگان CSS3 قسمت ۶۲(۳d transform)

سلام
در جلسه شصت و دوم css3 به ادامه transform ها در css3 مي پردازيم و حالت ۳d آن را یعنی
translate3d
translateZ
scale3d
scaleZ
rotate3d
rotateX
rotateY
rotateZ
به طور مفصل بيان مي کنيم و رايج ترين اشتباهاتي که در زمينه پراپرتي perspective و تابع perspective وجود دارد را بيان مي کنيم و به تفاوت اين دو مي پردازيم و در نهايت در رابطه به تعريف perspective صحبت مي کنيم و حالتي را براي شبيه سازي scalez ايجاد مي کنيم.

آموزش 3d transform-css3

آموزش css3

۳d transform in css

سلام

در جلسه شصت و دوم css3 به ادامه transform ها در css3 مي پردازيم و حالت ۳d آن را یعنی

translate3d
translateZ
scale3d
scaleZ
rotate3d
rotateX
rotateY
rotateZ

به طور مفصل بيان مي کنيم و رايج ترين اشتباهاتي که در زمينه پراپرتي perspective و تابع perspective وجود دارد را بيان مي کنيم و به تفاوت اين دو مي پردازيم و در نهايت در رابطه به تعريف perspective صحبت مي کنيم و حالتي را براي شبيه سازي scalez ايجاد مي کنيم.

 

These two formats both trigger a 3D space, but there is a difference. The functional notation is convenient for directly applying a 3D transform on a single element (in the previous example, I use it in conjunction with a rotateY transform). But when used on multiple elements, the transformed elements don’t line up as expected. If you use the same transform across elements with different positions, each element will have its own vanishing point. To remedy this, use the perspective property on a parent element, so each child may share the same 3D space.
The value of perspective determines the intensity of the 3D effect. Think of it as a distance from the viewer to the object. The greater the value, the further the distance, the less intense the visual effect. perspective: 2000px; yields a subtle 3D effect, as if we are viewing an object from far away through binoculars. perspective: 100px; produces a tremendous 3D effect, like a tiny insect viewing a massive object.
To activate 3D space, an element needs perspective. This can be applied in two ways: using the transform property, with the perspective as a functional notation.
The .container will house the 3D space. The #card acts as a wrapper for the 3D object. Two separate elements for both faces of the card, .front and .back. Even for such a simple object, I recommend using this same pattern for any 3D transform. Keeping the 3D space element and the object separate element establishes a paradigm that is simple to understand and easier to style.
The .container’s perspective only applies to direct descendant children, in this case #card. In order for subsequent children to inherit a parent’s perspective, and live in the same 3D space, the parent can pass along its perspective with transform-style: preserve-3d. Without 3D transform-style, the faces of the card would be flattened with its parents and the back face’s rotation would be nullified.
Take another look at the Weather App 3D transition. You’ll notice that it’s not quite the same effect as our previous demo. If you follow the right edge of the card, you’ll find that it stays flush with the container. Instead of pivoting from the horizontal center, it pivots on that right edge. But the transition is not just a rotation – the edge moves horizontally from right to left. We can reproduce this transition just by modifying a couple lines of CSS from our original card flip demo.

 

   دانلود

درباره ی مدیر-محسن پور

من مهیار محسن پور هستم. علاقه شدیدی به طراحی وب مخصوصا به کد نویسی سمت سرور دارم . به زبان های html,css,javascript,jquery,php تسلط دارم. 6 ساله برنامه نویسی می کنم و شروع برنامه نویسیم هم با اسمبلی بوده. به برنامه سازی سیستم علاقه خاصی دارم چون حس میکنم درک بالایی از کامپیوتر به انسان میده. با زبان #C اشنایی دارم و برای یک پروژه دانشگاهی با این زبان قدرتمند بازی طراحی کردم. برای گوشی های دارای سیستم عامل اندروید برنامه طراحی کردم و تا حدودی با برنامه نویسی اندروید هم اشنا هستم. تو حوزه IT و امنیت مدت کوتاهی فعالیت کردم و به نسبت با شبکه اشنا هستم.

2 دیدگاه

  1. م
    محمدرضا - رتبه بر اساس تعداد نظرات : خواننده

    سلام
    لینک خرابه،لطفا درستش کنید
    مرسی از لطفتون

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *