про эффекты css3.

[amelice]

Решила почитать про эффекты css, давно скачала книгу "pro css3 animation". Ну вот руки дошли.

Помимо других вещей которые происходят с трансформированным элементом, для меня было неожиданностью узнать, что:

 

ДОМ остается без изменений. значения свойств трансформированного элемента такие как offsetWidth так же не меняются. место занимаемое элементом сохраняется. 

 

До этого не задумывалась что происходит с трансформированным элементом, а теперь после того как вижу, что действительно свойства позиции блока в документе не меняются - запуталась- что же происходит с блоком который трансформируется?

 

То есть он в ДОМе такой же прямоугольник, несмотря на то какой он стал, а трансформированные области как нибудь регистрируются? а что если я хочу как то программно повлиять на эти области?

 

http://codepen.io/amelice/pen/vgEFC

это до трансформации

http://i.imgur.com/rHJSZq7.png

и после такой же.

 

была тема http://htmlforum.ru/index.php?showtopic=48683#entry325636

по этому поводу в книге написано, что:

 

The Webkit CSS3 Transform Aliasing Issue

Early versions of Chrome and Safari (up to version 5.1) contain a rendering bug: when transforming some elements, the browsers will not antialias the edges of rotated or skewed HTML content, resulting in so-called “jaggies” or “staircasing” on the edges of images, as shown in Figure 2-4.

 

There are various techniques for getting around this bug :

• Apply a 1-pixel white border around the element.

• Apply webkit-backface-visibility: hidden; to the element.

• Add another transformation to the element, such as -webkit-transform: rotate(−10deg) translateZ(0);.

 

Попробовала применить эти советы на том же примере:

 

1. http://jsfiddle.net/fHBg9/5/

2. http://jsfiddle.net/fHBg9/4/

3. http://jsfiddle.net/fHBg9/6/

 

Мне кажется первый совет устарел ибо не помогает, а справился хорошо самый последний.