Espial 3d,2d transforms preso

407 views

Published on

Samvel Avanesov's presentation for #OttawaHTML5

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
407
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Espial 3d,2d transforms preso

  1. 1. CSS3-3D/2D Transforms Guide Best practices
  2. 2. Espial Overview■ Powering the next generation of TV Everywhere via Consumer Electronics & Service Providers■ Solutions for SmartTV and PayTV markets■ Proven via Tier 1 Customers deployments globally■ Global Presence: Canada, US, Europe, Japan, China■ Publicly listed on Toronto Stock Exchange (TSX: ESP)
  3. 3. Select Global Smart TVsPowered by Espial Apps OTT Video Web Browsing Turnkey UX p3
  4. 4. Understanding DevicesMost application are now developed for: • mobile devices •TV (couch mode) • setup boxes etc. 4
  5. 5. Understanding DevicesAnother words: slower than desktop performance devices.When developing for such devices keep in mind one thingonly: Performance 5
  6. 6. Understanding DevicesDeveloper typically quickly learns that what’s up on desktop – isnot what’s up on the device. •Requests are slow •Animation slow •Paint slow •Scrolling slow 6
  7. 7. Understanding DevicesPainfully – developer learns what causes such performancebottlenecks. •Opacity •Round corners •Borders •Scale •Zoom •3d Transforms •Task overlay 7
  8. 8. CSS3D/2D transformsFor 3d transformation keep in mind: •Think 3D (point of origin) •Do minimum to achieve desired effect •Do one Task at a time (axis:XYZ) •Think what’s important to manipulate for a single transform actionFor 2d transformation keep in mind: •Things can be hardware accelerated (-transform-style: preserve-3d;) •Do one task at a time •No loading while animating •Images must be decoded first 8
  9. 9. CSS3D/2D transformsFor any CSS3 transformation – specify transformed property(-transition-property:;) 9
  10. 10. CSS3D/2D transforms and HTML5HTML5 code enjoys freedom of tag Names.Full support of CSS3 transforms 10

×