Recomendados
Recomendados
Más contenido relacionado
Similar a Espial 3d,2d transforms preso
Similar a Espial 3d,2d transforms preso (20)
Último
Último (20)
Espial 3d,2d transforms preso
- 1. CSS3-3D/2D Transforms Guide Best practices
- 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. Select Global Smart TVs Powered by Espial Apps OTT Video Web Browsing Turnkey UX p3
- 4. Understanding Devices Most application are now developed for: • mobile devices •TV (couch mode) • setup boxes etc. 4
- 5. Understanding Devices Another words: slower than desktop performance devices. When developing for such devices keep in mind one thing only: Performance 5
- 6. Understanding Devices Developer typically quickly learns that what’s up on desktop – is not what’s up on the device. •Requests are slow •Animation slow •Paint slow •Scrolling slow 6
- 7. Understanding Devices Painfully – developer learns what causes such performance bottlenecks. •Opacity •Round corners •Borders •Scale •Zoom •3d Transforms •Task overlay 7
- 8. CSS3D/2D transforms For 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 action For 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. CSS3D/2D transforms For any CSS3 transformation – specify transformed property (-transition-property:;) 9
- 10. CSS3D/2D transforms and HTML5 HTML5 code enjoys freedom of tag Names. Full support of CSS3 transforms 10