微妙的3D旋转图像失真

下载代码

html

css

分享到微信朋友圈

html

css

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background: #3C4B59;
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*  ========================================================================== 
	Work Item
    ========================================================================== */
.work__item {
  position: relative;
  width: 500px;
  height: 500px;
  min-height: 375px;
  max-height: 720px;
  padding: 10px;
  perspective: 300px;
}
.work__item:after {
  position: absolute;
  z-index: 0;
  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 10px;
  display: block;
  content: "";
  background: transparent;
  box-shadow: 4px 4px 80px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.work__item-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  background: black;
  overflow: hidden;
  box-shadow: 4px 4px 24px rgba(0, 0, 0, 0.3);
  transform-style: preserve-3d;
}

.work__item-img-outer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
}

.work__item-img {
  transform: scale(1.4);
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

JavaScript

init3D();

function init3D() {
	var $workItem = $(".work__item");

$workItem.each(function() {
		$(this).data("xPos", $(this).offset().left);
		$(this).data("yPos", $(this).offset().top);
		$(this).data("itemWidth", $(this).width());
		$(this).data("itemHeight", $(this).height());
		$(this).data("imgOuter", $(this).find(".work__item-img-outer"));
	});

$workItem.mousemove(function(e) {
		var xPos = $(this).data("xPos");
		var yPos = $(this).data("yPos");
		var mouseX = e.pageX;
		var mouseY = e.pageY;
		var left = mouseX - xPos;
		var top = mouseY - yPos;
		var origin = "center center -300";
		var xPerc =
			(left - $(this).data("itemWidth") / 2) / $(this).data("itemWidth") * 200;
		var yPerc =
			(top - $(this).data("itemHeight") / 2) / $(this).data("itemHeight") * 200;

TweenMax.to($(this).data("imgOuter"), 2, {
			rotationX: 0.1 * yPerc,
			rotationY: -0.1 * xPerc,
			transformOrigin: origin,
			ease: Expo.easeOut
		});
	});

$workItem.on("mouseleave", function() {
		TweenMax.to($(this).data("imgOuter"), 2, {
			rotationX: 0,
			rotationY: 0,
			transformOrigin: origin,
			ease: Expo.easeOut
		});
	});
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg