Question

目前，我正在尝试获得与以下网址中显示的卡片元素相同的效果：https://moteurdereussites.withgoogle.com/

正如你所看到的，有些卡看起来像每次我们悬停它时都被“推回”。并且“推回”效果应用于用户悬停元素的位置。

我怎样才能做到这一点？我试图使用rotate3d属性，但“外观和感觉”与原始属性相差甚远。这是我在Plunker中的工作。

任何帮助将不胜感激。谢谢。

Answer 1

var matWidth = $(".matrix").width();
var matHeight = $(".matrix").height();
var matHWidth = matWidth / 2;
var matHHeight = matHeight / 2;
$(".matrix").wrap("<div class='matrix-wrap'></div>").parent().css({
  "height": matHeight,
  "width": matWidth
});
$(".matrix-wrap").mousemove(function(e) {
  $(".matrix").css("-webkit-transform", "rotateX(" + (e.clientY - matHHeight) / matHHeight * -10 + "deg) rotateY(" + (e.clientX - matHWidth) / matHWidth * 20 + "deg)");
});

$(".matrix-wrap").mouseout(function() {
  $(".matrix").css("-webkit-transform", "rotateX(0) rotateY(0)");
  $(".matrix p").css("-webkit-transform", "translateZ(50px)");
});
$(".matrix-wrap").hover(function() {
  $(".matrix p").css("-webkit-transform", "translateZ(0px)");
});

.matrix {
  width: 500px;
  height: 250px;
  background: #82b8f5;
  border-radius: 3px;
  -webkit-transition: all 1s;
  display: flex;
  justify-content: space-around;
  align-content: space-around;
  perspective: 1000px;
}
.matrix p {
  font-family: 'Roboto', sans-serif;
  font-size: 36px;
  -webkit-transition: all 1s;
  -webkit-font-smoothing: antialiased;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<div class="matrix">
  <p>Some text</p>
  <p>Some more text</p>
</div>

我试图给你你所要求的但你需要根据你的要求进行微调。

悬停时的CSS Matrix3D变换

1 个答案: