Román Cortés is having a lot of fun with CSS tricks these days. He just built an example rolling CSS coke can that uses background-attachment, background-position, and a few other tricks to get the effect. No fancy CSS3 needed here!

로마 코르테스는 CSS 트릭으로 매우 재미있는것을 최근에 가지고있다. 그는 background-attachment, background-position와 몇개의 효과를 얻기위한 다른 트릭들을 이용해 콜라켄을 돌릴수있는 예제를 많들었다. 여기서는 CSS3가 필요하지않다!

The key pieces used:

중요한 사용한 조각:

p {
        background-image: url(coke-label.jpg);
        background-attachment: fixed;
        background-repeat: repeat-x;
        width: 1px;
}
 
#x1 {background-position: 5px 30px;}
#x2 {background-position: 0px 30px;}
#x3 {background-position: -3px 30px;}
#x4 {background-position: -6px 30px;}
#x5 {background-position: -8px 30px;}
 

It helps to see the can and the wrapper that is placed around it.

이것은 이것을 감싸는것을 도울수 있다.

takeone

당황스러울 정도의 예제네요. 이제 순수 CSS효과로도 멋진 효과를 만들수 있겠군요. 빨리 CSS3가 정착되었으면 합니다.