پیشنهاد فرادرس

دوره Transitions و Transforms در CSS 

دسته بندی ها: آموزش CSS ، آموزش طراحی وب ، آموزش های TreeHouse

Transitions و Transforms در CSS می تواند انیمیشن های ساده ایجاد کند که تعاملات کاربر را در وب سایت ها و برنامه ها افزایش دهد. در این دوره با ایجاد گالری تصویر تعاملی با استفاده از Transitions و Transforms در CSS آشنا می شوید. همچنین استفاده از ویژگی های transition برای تعریف مدت زمان، تأخیر و توابع را فرا خواهید گرفت. سپس، با CSS transforms، یاد خواهید گرفت چگونه عناصر را در فضاهای دو بعدی و سه بعدی چرخانده، scale کنید و حرکت دهید.

سرفصل:

  • آشنایی با Transitions و Transforms
  • ایجاد اولین Transition با transition-duration
  • ویژگی های CSS
  • شروع کار با CSS Transitions
  • چرخاندن عناصر
  • انیمیشن سازی CSS Transform
  • حرکت محتوا با ()translate
  • افزودن افکت هاس سه بعدی با CSS
  • درک 3D Transforms
  • ایجاد Rotating 3D Cube
  • و غیره
CSS Transitions and Transforms Course Publisher:TeamTreeHouse Author:Guil Hernandez Level:Beginner

CSS transitions and transforms can create simple animations that enhance user interactions in websites and apps. In this course, you'll build an interactive image gallery using CSS transitions and transforms.
You'll use transition properties to define durations, delays, and easing functions. Then, you'll learn how to rotate, scale, and move elements in 2D and 3D space, with CSS transforms.
About this Course
CSS transitions and transforms can create simple animations that enhance user interactions in websites and apps. In this course, you'll build an interactive image gallery using CSS transitions and transforms.
You'll use transition properties to define durations, delays, and easing functions. Then, you'll learn how to rotate, scale, and move elements in 2D and 3D space, with CSS transforms.
What you'll learn
Transition properties
Transform properties
3D transforms
Cubic-bezierGetting Started with CSS Transitions
CSS transitions provide a way to control property changes over a given duration. Learn basic CSS transition properties that define a duration and the property (or properties) you want to transition.
9 steps
Getting to Know Transitions and Transforms
2:34
Creating Your First Transition with transition-duration
8:45
Transitioning Specific Properties with transition-property
2:54
Transition Challenge
2 objectives
Animatable CSS Properties
3:34
The Transition Challenge Solution
2:22
Transitioning Multiple Properties
5:09
Transitioning Multiple Properties
2 objectives
Review: Getting Started with CSS Transitions
7 questions
Transition Timing Functions and Delays
Learn transition properties for varying a transition's speed and start time.
5 steps
Control a Transition's Start Time with transition-delay
7:36
Change a Transition's Speed with Timing Functions
6:59
Combine Transition Properties with the transition Shorthand
5:20
Review: Timing Functions and Delays
7 questions
Timing Functions and Delays Challenge
5 objectives
Getting Started with CSS Transforms
CSS transforms visually manipulate content by rotating, scaling, skewing and moving elements in two-dimensional or three-dimensional space.
11 steps
Rotating Elements
4:37
Animating a CSS Transform
4:22
Skewing Content
3:48
Scaling Elements
3:12
Changing the Transform Position with transform-origin
7:01
Moving Content with translate()
4:55
Creating a Slide Transition
5:39
Combining Transforms
3:36
CSS Transforms Challenge
2 objectives
Custom Timing Functions with cubic-bezier()
6:43
Review: Getting Started with CSS Transforms
7 questions
Adding 3D Effects with CSS
3D transforms are an extension of 2D transforms. 3D transform properties add depth to elements on the page by introducing a Z-axis where elements can translate, rotate and scale within a 3D perspective.
10 steps
Understanding 3D Transforms
2:42
Activate 3D Space with perspective
6:47
Create a Flipping Animation with 3D Transform Properties
10:09
3-Dimensional Rotations with rotateZ() and rotate3d()
4:47
Changing the Viewing Position with perspective-origin
4:46
3D Transforms Challenge
2 objectives
Creating a Consistent Depth Perspective
2:39
Build a Rotating 3D Cube
9:31
Moving Content with translate3d()
3:44
Review: 3D Transforms
6 questions

پیشنهاد فرادرس

لینک های دانلود حجم فایل: 352.0MB TeamTreeHouse CSS Transitions and Transforms Course_git.ir.rar