1
我已经构建了一个小元素3d旋转器,用于在X或Y轴上以任意方向无限旋转。但是我遇到了我认为是CSS风格的冲突。 #face2有一个css属性,它旋转-180deg。然而它没有被浏览器实现。javascript和css之间的风格冲突
这可能是一个css冲突吗?
你可以看到在这个代码笔的代码和效果:
//declaring global variables
window.RotXFrontVal = 0; // by how much to rotate the X value of the front face
window.RotXBackVal = -180; // by how much to rotate the X value of the back face
window.RotYFrontVal = 0; // by how much to rotate the Y value of the front face
window.RotYBackVal = 180; // by how much to rotate the Y value of the back face
$(document).ready(function() {
//$('#face2').css({'transform': 'rotateX(-180deg)'}, 0);
//$('#face2').animate({'transform', 'rotateX(-180deg)'}, 0);
//$('#face2').animate({'transform': 'rotateX(-180deg)'}, 0);
var MyDivSlider = function() { // Here will come the Div Slider by Scroll
var scl = $.now(); // Take a time stamp to prevent function from triggering too often
$(document).on('DOMMouseScroll mousewheel', function MyScroll(event) {
if (($.now() - scl) > 500) {
if (event.originalEvent.detail > 0 || event.originalEvent.wheelDelta < 0) {
//Scroll Down
window.RotXFrontVal = window.RotXFrontVal - 180;
window.RotXBackVal = window.RotXBackVal - 180;
console.log("Down. Front: " + RotXFrontVal + "and" + RotXBackVal + " is Back");
}
//Up Scroll
else {
window.RotXFrontVal = window.RotXFrontVal + 180;
window.RotXBackVal = window.RotXBackVal + 180;
console.log("Up. Front: " + RotXFrontVal + "and" + RotXBackVal + " is Back");
}
$('#face2').css('transform', 'rotateX(' + RotXBackVal + 'deg)');
$('#face1').css('transform', 'rotateX(' + RotXFrontVal + 'deg)');
console.log('rotateX(' + RotXFrontVal + ')')
console.log('rotateX(' + RotXBackVal + ')')
scl = $.now();
}
});
}();
});
body { height:100%; overflow:hidden;}
#card {
\t height:300px;
\t \t width: 300px;
\t \t display: block;
\t \t position: relative;
\t \t transform-style: preserve-3d;
\t \t transition: all 1.5s linear;
\t \t perspective: 1000px;
}
#face1 {
\t \t display: block;
\t \t position: absolute;
\t \t width: 100%;
\t \t height: 100%;
\t \t background: red;
\t \t backface-visibility: hidden;
\t \t transition: transform 1.5s;
\t \t z-index: 2;
}
#face2 {
\t \t display: block;
\t \t position: absolute;
\t \t width: 100%;
\t \t height: 100%;
\t \t background: blue;
\t \t backface-visibility: hidden;
\t \t transition: transform 1.5s;
\t \t z-index: 1;
\t \t transform: rotateX (-180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<body>
\t <div id="card">
\t \t <div id = "face1">Use the mouse scroll button to rotate me</div>
\t \t <div id = "face2">Use the mouse scroll button to rotate me</div>
\t </div> \t \t \t
</body>
谢谢您!正如你所说我删除了空间,现在它工作! –
@ohavbenyanai所以标记他的答案为溶剂;) – artdias90