ссылка блокирования преобразования webkit
Я работал с преобразованиями и переходами для создания анимированных компонентов пользовательского интерфейса без Javascript и действительно наслаждался результатами, но я столкнулся с тревожной проблемой, которая, по-видимому, уникальна для браузеров webkit.
На элементе, который я повернул, якорь, занимающий 100% ширины элемента, доступен только на 50% правого элемента.
Эта проблема не существует с помощью -moz-transform в Firefox, но воспроизводится на 100% как в Chrome, так и в Safari с использованием -webkit-transform.
Вот код:
<!doctype html>
<html>
<head>
<title>webkit spincard test bed</title>
<style type="text/css">
#card-lists{
width:100%;
float:left;
}
#card-lists ul{
list-style:none;
}
#card-lists ul li{
width:230px;
height:236px;
}
.non-mobile #card-lists ul.card-list li .flipcard-container:hover .flipcard,
.non-mobile #card-lists ul.card-list li .flipcard-container.hover .flipcard{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform-style: preserve-3d;
-moz-transition: all 0s linear 0s;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 0s linear 0s;
}
.non-mobile #card-lists ul.card-list li .flipcard{
-moz-transform: rotateY(0deg);
-moz-transition: all 0s linear 0s;
-webkit-transform: rotateY(0deg);
-webkit-transition: all 0s linear 0s;
width:230px;
height:236px;
}
.face {
position: absolute;
width: 100%;
height: 100%;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.face.back {
background-color: #125672;
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
.face.front {
background-color:#000;
}
</style>
</head>
<body class="non-mobile">
<div id="card-lists">
<ul class="card-list" id="cardes-list-total">
<li>
<div class="flipcard-container">
<div class="flipcard">
<div class="front face">
<a href="#">
<div style="width:100%; height:100%;">
</div>
</a>
</div>
<div class="back face">
<a href="#">
<div style="width:100%; height:100%;">
</div>
</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
Любая помощь, которую кто-либо может предложить, будет принята с благодарностью, поскольку я уже потратил слишком много времени на решение этой проблемы.