Css translate does not work

Question

툴팁의 번역에 문제가 있습니다. 번역이 나타나야합니다. 하지만 내 코드에서 그것은 나타납니다 ... 내 코드에서 무엇이 잘못 찾을 수 없습니다 ... 제발 제발 아이디어?

데모 : http://jsfiddle.net/RWYeF/

코드 :이 선택 .bulle_abo, .combulle에서

.bulle_abo, .combulle { 
    border: 1px solid #909090; 
    bottom: 100%; 
    color: #fff; 
    display: block; 
    left: -114px; 
    margin-bottom: 15px; 
    opacity: 0; 
    display:none; 
    padding: 20px; 
    pointer-events: none; 
    position: absolute; 
    min-width: 250px; 
    -webkit-transform: translateY(10px); 
    -moz-transform: translateY(10px); 
    -ms-transform: translateY(10px); 
    -o-transform: translateY(10px); 
    transform: translateY(10px); 
    -webkit-transition: all .25s ease-out; 
    -moz-transition: all .25s ease-out; 
    -ms-transition: all .25s ease-out; 
    -o-transition: all .25s ease-out; 
    transition: all .25s ease-out; 
    -webkit-box-shadow: 0 0 8px 2px rgba(0, 0, 0, 1); 
    -moz-box-shadow: 0 0 8px 2px rgba(0, 0, 0, 1); 
    -ms-box-shadow: 0 0 8px 2px rgba(0, 0, 0, 1); 
    -o-box-shadow: 0 0 8px 2px rgba(0, 0, 0, 1); 
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 1); 
    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px; 
    border-radius: 6px; 
    background: #ffffff; 
    /* Old browsers */ 
    background: -moz-linear-gradient(top, #ffffff 0%, #c9c9c9 2%, #606060 53%); 
    /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(2%, #c9c9c9), color-stop(53%, #606060)); 
    /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #ffffff 0%, #c9c9c9 2%, #606060 53%); 
    /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #ffffff 0%, #c9c9c9 2%, #606060 53%); 
    /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #ffffff 0%, #c9c9c9 2%, #606060 53%); 
    /* IE10+ */ 
    background: linear-gradient(to bottom, #ffffff 0%, #c9c9c9 2%, #606060 53%); 
    /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#606060', GradientType=0); 
    /* IE6-9 */ 
} 
.combulle { 
    margin-left: -36px; 
} 
/* This bridges the gap so you can mouse into the tooltip without it disappearing */ 
.bulle_abo:before, .combulle:before { 
    bottom: -20px; 
    content:" "; 
    display: block; 
    height: 20px; 
    left: 0; 
    position: absolute; 
    width: 100%; 
} 
/* CSS Triangles - see Trevor's post */ 
.bulle_abo:after, .combulle:after { 
    background: url(/themes/glace_et_ombre/images/flbas.png) no-repeat; 
    bottom: -20px; 
    content:" "; 
    height: 20px; 
    left: 144px; 
    margin-left: -13px; 
    position: absolute; 
    width: 20px; 
} 
.enveloppe_abo:hover .bulle_abo, .enveloppe_bulaut:hover .combulle { 
    opacity: 0.95; 
    display:block; 
    pointer-events: auto; 
    -webkit-transform: translateY(0px); 
    -moz-transform: translateY(0px); 
    -ms-transform: translateY(0px); 
    -o-transform: translateY(0px); 
    transform: translateY(0px); 
} 
/* IE can just show/hide with no transition */ 
.lte8 .enveloppe_abo .bulle_abo, lte8 .enveloppe_bulaut .combulle { 
    display: none; 
} 
.lte8 .enveloppe_abo .bulle_abo, lte8 .enveloppe_bulaut .combulle { 
    display: block; 
} 
a.lien_bulle:link, a.lien_bulle:active, a.lien_bulle:visited { 
    color: rgb(0, 78, 194); 
    text-shadow: 0 1px 3px rgb(255, 255, 255); 
    font-size: 18px; 
    -o-transition:.3s; 
    -ms-transition:.3s; 
    -moz-transition:.3s; 
    -webkit-transition:.3s; 
    transition:.3s; 
} 
a.lien_bulle:hover { 
    color: rgb(228, 235, 255); 
    text-shadow: 0 1px 0 #000; 
} 
.all_abo { 
    position: relative; 
    display: block; 
    float: left; 
    padding-left: 2px; 
} 
.avatar_abo_bulle { 
    float: left; 
    position: relative; 
    height: 68px; 
    width: 68px; 
    display: block; 
    overflow: hidden; 
    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px; 
    border-radius: 6px; 
    box-shadow: 0px 0px 8px 1px #000; 
    -webkit-box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 1); 
    -moz-box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 1); 
} 
.texte_abo_bulle { 
    margin-left: 90px; 
    -webkit-font-smoothing: antialiased; 
    font-size: 14px; 
} 
.enveloppe_abo { 
    position: relative; 
    float: left; 
    display: block; 
    -webkit-transform: translateZ(0); 
    -webkit-font-smoothing: antialiased; 
    z-index:11; 
} 
.enveloppe_bulaut { 
    position: relative; 
    -webkit-transform: translateZ(0); 
    -webkit-font-smoothing: antialiased; 
} 

Answer 1

두 개의 디스플레이 속성이 있습니다

.bulle_abo, .combulle { 
    ... 
    display: block; 
    ... 
    display: none; 
    … 
} 

제거 : 디스플레이 : (당신은 없음에서 아무도 전환 할 수 없습니다 차단 대상)

Working Fiddle