CODEWITHSUNDEEP
cssgoogle-chrome
Wojciech Parys
Wojciech Parys

Reputation: 350

CSS Transform at chrome

I've created simply hover animation using CSS and some Jquery. All works fine until chrome get updated. Now transformed element is half after content and half before, link to demo site: http://demo.pandaart.pl/wp/gemini/ On firefox it works fine. On IE same problem as chrome.

Here is my CSS:

#home_boxes{
    position: relative;
    margin-left: -10px;
    margin-right: -10px;
    display: table;
    width:1170px;
}
#home_boxes .item {
    float: left;
    width: 370px; height: 250px;    
    display: block;
    margin: 10px;
}
#home_boxes .box .opis{
    position: absolute;
    height: 100px;
    width:100%;
    left:0; bottom: 0;
    color: #FFF;
    z-index: 1;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.7);
    text-align: center;
}
#home_boxes .box .opis .bg{
    background: #dd2a1b;
    opacity: 0.7;
    position: absolute;
    width:100%;
    height: 100%;
    left:0;top:0;
    display: block;
    z-index: -1;
}
#home_boxes .box .content{
    display: none;
    height: 100%;
    padding: 20px;
    background: #FFF;
    opacity: 0;
}

#home_boxes .box {
    float: left;
    width: 370px; height: 250px;    
    display: block;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #FFF;
    border: 7px solid #442321;
    border-radius: 7px;
    position: relative;
    overflow: hidden;
    transition: all 0.8s cubic-bezier(0.18, 0.89, 0.32, 1);
}
#home_boxes .box.open{
    position: absolute;
    width: calc(100% - 20px);
    height: 520px;
    z-index: 1002;
    transition: all 0.8s cubic-bezier(0.18, 0.89, 0.32, 1.3);
}
#home_boxes .item:nth-of-type(2) .box.open{
    margin-left: -390px;
}
#home_boxes .item:nth-of-type(3) .box.open{
    margin-left: -780px;
}
#home_boxes .item:nth-of-type(4) .box.open{
    margin-top:-270px;
}
#home_boxes .item:nth-of-type(5) .box.open{
    margin-top:-270px;
    margin-left: -390px;
}
#home_boxes .item:nth-of-type(6) .box.open{
    margin-top:-270px;
    margin-left: -780px;
}
#home_boxes .box .okladki{
    opacity: 0;
    width:100%; height: 100%;
    position: absolute;
    transform:rotateY(0deg);
    transition:transform .3s ease-in-out;
    transform-style:preserve-3d;
    cursor: pointer;
}  
#home_boxes .box.open .content{
    display: block;
    overflow: auto;
}
#home_boxes .box:not(.open) .okladki{    
    opacity: 1;
}
#home_boxes .box .okladki > div {
    width: 100%; height: 100%;     
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
}
#home_boxes .box .front {
    transform:translateZ(40px);
}
#home_boxes .box .back {
    background: #3B5998; font-size: 3em;
    transform:rotateY(-100deg) translateZ(40px);
}
#home_boxes .box .okladki:hover {
    transform: rotateY(100deg);
}

Any suggestions? Thanks for comments ;)

Upvotes: 0

Views: 69

Answers (2)

stanze
stanze

Reputation: 2480

Updated the value of translateZ(180px) in the below class, add the below code and try.

#home_boxes .box .back {
    background: #3B5998; font-size: 3em;
    transform:rotateY(-100deg) translateZ(180px);
}

Upvotes: 0

Vineeta Mehta
Vineeta Mehta

Reputation: 458

updated some of css worked fine for me

#home_boxes .box .okladki:hover {
    transform: rotateY(180deg);
}
#home_boxes .box .front {
  transform: rotateY(0deg) translateZ(40px);
}
#home_boxes .box .back {
  background: #3B5998;
  font-size: 3em;
  transform: rotateY(-180deg) translateZ(40px);
}

you can refer http://davidwalsh.name/css-flip for more details

Upvotes: 1

Related Questions