3D透视卡XY

下载代码

html

css

分享到微信朋友圈

html

css

@import url(https://fonts.googleapis.com/css?family=Roboto);
html, body {
  font-family: "Roboto", sans-serif;
  height: 100%;
}

body {
  transform-style: preserve-3d;
  transform: perspective(800px);
  background-color: #1F1F1F;
}

.wrap {
  position: absolute;
  perspective: 600px;
  height: 100%;
  width: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  text-align: center;
}

.card-shadow, .card {
  margin: 0 auto;
  margin-top: 100px;
  width: 300px;
  height: 450px;
  z-index: 1;
  position: absolute;
  border-radius: 10px;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}

.card {
  background: #fff url("https://images.unsplash.com/photo-1441716844725-09cedc13a4e7?fit=crop&fm=jpg&h=950&q=80&w=1925") 50% 50%;
  background-size: 450%;
}

.card-shine {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  z-index: 1;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 60%);
  z-index: -1;
}

.card-shadow {
    top: 10px;
    transform-style: preserve-3d;
    transform: translateZ(40px);
    z-index: -1;
    background: #1f1f1f45;
    transform: scale(0.5, 0.5);
    box-shadow: 0 0 30px 10px #0e0e0e;
}
.card-front, .card-title, .card-subtitle {
  position: absolute;
  color: #FFF;
  transform-style: preserve-3d;
}

.card-front {
  border-radius: 10px;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-color: rgba(0, 0, 0, 0.1);
}

.card-title {
  font-weight: 700;
  text-align: left;
  left: 30px;
  bottom: 140px;
  font-size: 35px;
  line-height: 30px;
  text-shadow: 0 5px 8px rgba(0, 0, 0, 0.65);
  transform: translateZ(0px);
  overflow: hidden;
  margin: 0;
  width: 80%;
}

.card-subtitle {
  font-weight: normal;
  text-align: left;
  left: 30px;
  width: 80%;
  bottom: 80px;
  font-size: 25px;
  line-height: 20px;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.8);
  transform: translateZ(0px);
}

JavaScript

var 
$card = $('.card'),
$cardTitle = $('.card-title'),
$cardSubtitle = $('.card-subtitle'),
$cardShine = $('.card-shine'),
$cardShadow = $('.card-shadow'),
currentMousePos = { x: 0, y: 0 },
mouseFromCenter = { x: 0, y: 0 };

$(document).mousemove(function(event) {
	var
	wHeight= $(window).height(),
	wWidth= $(window).width();

currentMousePos.x = event.pageX;
	currentMousePos.y = event.pageY;
	mouseFromCenter.x = currentMousePos.x - (wWidth / 2);
	mouseFromCenter.y = currentMousePos.y - (wHeight / 2);
	
	var 
	around1 = -1 * (currentMousePos.y * 100 / wHeight * 0.2 - 10) + 'deg',
	around2 = 1 * (currentMousePos.x * 100 / wWidth * 0.2 - 10) + 'deg',
	trans1 = (currentMousePos.x * 100 / wHeight * 0.3 ) + 'px',
	trans2 = (currentMousePos.y * 100 / wHeight * 0.3 ) + 'px',
	dy = event.pageY - wHeight / 2, //@h/2 = center of poster
	dx = event.pageX - wWidth / 2, //@w/2 = center of poster
	theta = Math.atan2(dy, dx), // angle between cursor and center of poster in RAD
	angle = theta * 180 / Math.PI - 90,  
	mousePositionX = ( currentMousePos.x / wWidth) * 100,
	mousePositionY = 50+( currentMousePos.y / wHeight)*10;

// gradient angle and opacity for card shine effect
	$cardShine.css('background', 'linear-gradient(' + angle + 'deg, rgba(255,255,255,' + (currentMousePos.y / wHeight) * .7 + ') 0%,rgba(255,255,255, 0) 80%)');
	// card pos and angle
	$card.css({
	"-webkit-transform": "translate3d(" + trans1 + ", " + trans2 +", 0) scale(1) rotatex(" + around1 + ") rotatey(" + around2 + ")",'background-position': mousePositionX + '%' + ' ' + (currentMousePos.y / wHeight) * 50  + '%'
	});
	// card shadow pos and angle
	$cardShadow.css({"transform": "scale(.9,.9) translateX(" + ((mouseFromCenter.x * -0.02) + 12) + "px) translateY(" + ((mouseFromCenter.y * -0.02) + 12 ) + "px) scale(1.0) rotateY(" + (mouseFromCenter.x / 25) * 0.5 + "deg) rotateX(" + ((mouseFromCenter.y / -25) ) + "deg)" });

$cardTitle.css({"transform": "translateX(" + ((mouseFromCenter.x / 25) * 0.7) + "px) translateY(" + ((mouseFromCenter.y / 25) * 1.65) + "px)"
	});

$cardSubtitle.css({"transform": "translateX(" + ((mouseFromCenter.x / 25) * 0.5) + "px) translateY(" + ((mouseFromCenter.y / 25) * 1.15) + "px) translateZ(60px)"
	});
});

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