3d透视效果只能在chrome中正常工作？

时间：2018-09-11 22:53:07

标签： javascript jquery css

您好，在其他浏览器中要实现相同的3d透视效果有些困难。一切正常，并在Chrome中正确显示。在这里，您将看到对鼠标移动的真实3D透视效果。但是在Firefox中，一切看起来都很平坦，并且效果不正确。

是否有使它在所有现代浏览器上都能正常工作的技巧？

标记Jquery也是因为它开放了Jquery解决方案。

在Chrome中是什么样子：

enter image description here


在Firefox中的外观：

enter image description here

如何在所有现代浏览器上实现相同的效果？

!(function ($doc, $win) {
	var screenWidth = $win.screen.width / 2,
		screenHeight = $win.screen.height / 2,
		$elems = $doc.getElementsByClassName("elem"),
		validPropertyPrefix = '',
		otherProperty = 'perspective(1000px)',
		elemStyle = $elems[0].style;

	if(typeof elemStyle.webkitTransform == 'string') {
		validPropertyPrefix = 'webkitTransform';
	} else if (typeof elemStyle.MozTransform == 'string') {
		validPropertyPrefix = 'MozTransform';
	}

	$doc.addEventListener('mousemove', function (e) {
		var centroX = e.clientX - screenWidth,
			centroY = screenHeight - (e.clientY + 13),
			degX = centroX * 0.02,
			degY = centroY * 0.01,
			$elem

		for (var i = 0; i < $elems.length; i++) {
   			$elem = $elems[i];
			$elem.style[validPropertyPrefix] = otherProperty + 'rotateY('+ degX +'deg)  rotateX('+ degY +'deg)';
		};
	});
})(document, window);
html, body{
  width:100%;
  height:100%;
}


body {
  background: #004382;
  overflow: hidden;
}
 .desk-scene{
  height: 100%;
  background-size: contain;
  max-width: 982px;
  display:flex;
  flex-wrap:nowrap;
  margin: 0 auto;
}

.threed {
  height: 100%;
  background-size: contain;
  max-width: 982px;
  margin: 0 auto;
  transform-style: preserve-3d;
}
.desk-scene-wrapper{
  height: 100%;
  background-size: contain;
  width: 100%; display:block;
  justify-content: center;
  margin: 0 auto;
}
.desk-scene-wrapper1{
  width: 100%;
  display:flex;
  justify-content:center;
  z-index: 9999;

}
.desk1 {
  margin: 0 auto;
  max-width:982px;
  width:100%;
  height:100%;
 background: url('http://portalpacific.net/img/desk/ian-xing.png') no-repeat center center;
  background-size: contain;
  position:absolute;
  -webkit-transform: translateZ(180px) scale(1);
  z-index: 1;
}
.wrapper {
  transform-style: preserve-3d;
  margin: 0 auto;
  max-width:982px;
  width:100%;
  height:100%;
 background: url('http://portalpacific.net/img/desk/cloud.png') no-repeat center center;
  background-size: contain;
}

.bloc {
  background-size: contain;
  background-position: center;
  background: url('http://portalpacific.net/img/desk/icon-circles.png') no-repeat;
  background-position: center;
  max-width:982px;
  width:100%;
  height:100%;
  position:relative;
  display:flex;
  justify-content: center;
  align-self:center;
  background-size: contain;

}

.content {
  -webkit-transform: translateZ(80px) scale(1);
  height: 100%;
  width: 100%;
  max-width: 720px;
  position: absolute;
  margin:auto;
  color: #fff;
  z-index: 3;
}

.content1 {
 transform: translateZ(80px) scale(1);
 background: url('http://portalpacific.net/img/desk/Website.png') no-repeat;
  background-position: center;
  max-width:982px;
  width:100%;
  height:100%;
  position:relative;
  display:flex;
  justify-content: center;
  align-self:center;
  background-size: contain;
}

.content2 {
    background: url('http://portalpacific.net/img/desk/webicons.png') no-repeat;
  transform: translateZ(30px) scale(1);
  background-position: center;
  max-width:982px;
  width:100%;
  height:100%;
  position:absolute;
  display:flex;
  justify-content: center;
  align-self:center;
  background-size: contain;
}
<div class="threed">
    <div class="desk-scene-wrapper1">
        <div class="desk1"> </div>
    </div>

    <div class="desk-scene-wrapper">

        <div class="desk-scene">

            <div class="wrapper elem" style="transform: perspective(700px) rotateY(0deg) rotateX(0deg);">

                <div class="bloc">

                    <div class="content content1">
                    </div>

                    <div class="content content2">
                    </div>

                </div>

            </div>
        </div>
    </div>

1 个答案:

答案 0 :(得分：0)

鉴于其他浏览器似乎对3D转换的处理方式不同，则可以移动中心来伪造效果：

!(function($doc, $win) {
  var screenWidth = $win.innerWidth / 2,
    screenHeight = $win.innerHeight / 2,
    $elems = $doc.getElementsByClassName("elem"),
    otherProperty = "perspective(500px)",
    elemStyle = $elems[0].style;

  $doc.addEventListener("mousemove", function(e) {
    var centroX = e.clientX - screenWidth,
      centroY = screenHeight - (e.clientY + 13),
      degX = centroX * 0.02,
      degY = centroY * 0.01,
      $elem;

    for (var i = 0; i < $elems.length; i++) {
      $elem = $elems[i];
      $elem.style.transform =
        otherProperty + "rotateY(" + degX + "deg)  rotateX(" + degY + "deg)";
    }
    $doc.getElementsByClassName("content1")[0].style.left = (centroX / 25) + "px"    
    $doc.getElementsByClassName("content1")[0].style.top = -(centroY / 25) + "px"    
    $doc.getElementsByClassName("content2")[0].style.left = (centroX / 50) + "px"
    $doc.getElementsByClassName("content2")[0].style.top = -(centroY / 50) + "px"
  });
})(document, window);
html, body{
  width:100%;
  height:100%;
}


body {
  background: #004382;
  overflow: hidden;
}
 .desk-scene{
  height: 100%;
  background-size: contain;
  max-width: 982px;
  display:flex;
  flex-wrap:nowrap;
  margin: 0 auto;
}

.threed {
  height: 100%;
  background-size: contain;
  max-width: 982px;
  margin: 0 auto;
  transform-style: preserve-3d;
}
.desk-scene-wrapper{
  height: 100%;
  background-size: contain;
  width: 100%; display:block;
  justify-content: center;
  margin: 0 auto;
}
.desk-scene-wrapper1{
  width: 100%;
  display:flex;
  justify-content:center;
  z-index: 9999;

}
.desk1 {
  margin: 0 auto;
  max-width:982px;
  width:100%;
  height:100%;
 background: url('http://portalpacific.net/img/desk/ian-xing.png') no-repeat center center;
  background-size: contain;
  position:absolute;
  transform: translateZ(180px) scale(1);
  z-index: 1;
}
.wrapper {
  transform-style: preserve-3d;
  margin: 0 auto;
  max-width:982px;
  width:100%;
  height:100%;
 background: url('http://portalpacific.net/img/desk/cloud.png') no-repeat center center;
  background-size: contain;
}

.bloc {
  background-size: contain;
  background-position: center;
  background: url('http://portalpacific.net/img/desk/icon-circles.png') no-repeat;
  background-position: center;
  max-width:982px;
  width:100%;
  height:100%;
  position:relative;
  display:flex;
  justify-content: center;
  align-self:center;
  background-size: contain;

}

.content {
  height: 100%;
  width: 100%;
  max-width: 720px;
  position: absolute;
  margin:auto;
  color: #fff;
  z-index: 3;
}

.content1 {
 background: url('http://portalpacific.net/img/desk/Website.png') no-repeat;
  background-position: center;
  max-width:982px;
  width:100%;
  height:100%;
  position:relative;
  display:flex;
  justify-content: center;
  align-self:center;
  background-size: contain;
}

.content2 {
    background: url('http://portalpacific.net/img/desk/webicons.png') no-repeat;
  background-position: center;
  max-width:982px;
  width:100%;
  height:100%;
  position:absolute;
  display:flex;
  justify-content: center;
  align-self:center;
  background-size: contain;
}
<div class="threed">
    <div class="desk-scene-wrapper1">
        <div class="desk1"> </div>
    </div>

    <div class="desk-scene-wrapper">

        <div class="desk-scene">

            <div class="wrapper elem" style="transform: perspective(2000px) rotateY(0deg) rotateX(0deg);">

                <div class="bloc">

                    <div class="content content2"></div>
                    <div class="content content1"></div>

                </div>

            </div>
        </div>
    </div>

关键部分是：

$doc.getElementsByClassName("content1")[0].style.left = (centroX / 25) + "px"    
$doc.getElementsByClassName("content1")[0].style.top = -(centroY / 25) + "px"    
$doc.getElementsByClassName("content2")[0].style.left = (centroX / 50) + "px"
$doc.getElementsByClassName("content2")[0].style.top = -(centroY / 50) + "px"
相关问题
最新问题