10
Mã sau hoạt động trong tất cả các trình duyệt ngoại trừ IE.10.Internet Explorer Bảo tồn sửa lỗi 3D
trang web MSDN nói như sau (mà tôi không hiểu làm thế nào để áp dụng):
Lưu ý Các đặc điểm kỹ thuật W3C định nghĩa một giá trị từ khóa của bảo tồn-3d cho thuộc tính này, mà chỉ ra rằng làm phẳng không được thực hiện. Tại thời điểm này, Internet Explorer 10 không hỗ trợ từ khóa bảo toàn-3d. Bạn có thể làm việc xung quanh điều này bằng cách áp dụng thủ công phép biến đổi của phần tử cha cho mỗi phần tử con ngoài phép biến đổi bình thường của phần tử con.
https://msdn.microsoft.com/en-gb/library/ie/hh673529(v=vs.85).aspx
Mã của tôi (Tôi đang sử dụng bộ chọn CSS vì những lý do khác):
div[class^="flip"] {
display: inline-block;
}
div[class^="flip"] {
-webkit-perspective: 800;
-moz-perspective: 800;
-ms-perspective: 800;
-o-perspective: 800;
perspective: 800;
width: 313px;
height: 480px;
position: relative;
margin-right: 10px;
margin-left: 10px;
}
div[class^="flip"] .card.flipped {
-webkit-transform: rotatey(-180deg);
-moz-transform: rotatey(-180deg);
-o-transform: rotatey(-180deg);
transform: rotatey(-180deg);
}
div[class^="flip"] .card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
div[class^="flip"] .card .face {
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 2;
text-align: center;
}
div[class^="flip"] .card .front {
position: absolute;
z-index: 1;
background: #F5F5F5;
border: #DDD 1px solid;
}
div[class^="flip"] .card .back {
-webkit-transform: rotatey(-180deg);
-moz-transform: rotatey(-180deg);
-o-transform: rotatey(-180deg);
transform: rotatey(-180deg);
background: #F5F5F5;
border: #DDD 1px solid;
}<div class="flip1">
<div class="card">
<div class="face front">Front content</div>
<div class="face back">Back content</div>
</div>
</div>Ông có thể vui lòng giúp tôi với điều này?
Rất cám ơn!
Tôi đã có phản hồi rất tốt với câu hỏi rất giống http://stackoverflow.com/questions/13474210/css3-3d-flip-animation-ie10-transform-origin-preserve-3d-workaround – 2ne
Bạn có nhận được điều này không đang làm việc? Tôi đang gặp vấn đề tương tự. –