0

我创建了一张卡片，它包装在 react-parallax-tilt 包中的 Tilt 组件中。倾斜效果完美，但是当tiltReverse 属性设置为 false - 意味着您的鼠标位置将 div 在 Z 轴上移动到更靠近您的位置时，悬停效果不再起作用。

很想知道是否有人可以解决使用该包的问题.. 似乎 Glare 也可能会影响它，它是 div 顶部的绝对位置层。

  • 注意父 html 是一个带有 .eventpage-wrapper 类的 div 和另一个带有 class="container" 子 html 的 div 和 bootstrap 4
import React from "react";
import { Row, Col } from "react-bootstrap";
import { Link } from "react-router-dom";
import { format } from "date-fns";
import Tilt from "react-parallax-tilt";

export default function EventCard2(props) {
  return (

    <Row className="eventpage-row" noGutters>
      <Tilt
        // --primary-color: #ea6d7c #e9929c;
        // --secondary-color: #ffe415;

        // --tertiary-color: #eb9e6e;
        perspective={1000}
        transitionSpeed="200"
        tiltReverse={true}
        tiltMaxAngleX={7}
        tiltMaxAngleY={7}
        glareEnable={true}
        glareMaxOpacity={0.3}
        glareBorderRadius="20px"
        glarePosition="all"
        className="tilt d-flex"
        style={{ width: "100%" }}
      >
        <Col sm={12} md={6} className="eventpage-col px-3">
          <div className="event1-info-div">
            <p className="event-date">
              {format(new Date(props.eventData.eventDate), "dd-MM-yyyy")}
            </p>
            <h5 className="event-name">{props.eventData.name.toUpperCase()}</h5>
            <p className="event-description">{props.eventData.description}</p>
            <Link id="event-details-link" to={`/events/${props.eventData._id}`}>
              Details
            </Link>
          </div>
        </Col>
        <Col sm={12} md={6} className="eventpage-col px-3">
          <img
            className="event-image"
            src={
              props.eventData.image
                ? props.eventData.image
                : "https://fakeimg.pl/200x100/?text=No+image+found"
            }
            alt="event artwork"
          />
        </Col>
      </Tilt>
    </Row>
  );
}

css

.eventpage-wrapper {
  margin-top: 100px;
  height: 100%;
  width: 100vw;
  background-image: url("./images/background-lineup.svg");
  background-repeat: repeat-y;
}

.eventpage-row {
  padding: 1% 3%;
  margin: 2% 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out;
  transform-style: preserve-3d;
}

.eventpage-col {
  display: flex;
  box-sizing: border-box;
  align-items: center !important;
  height: 100%;
  padding: 5% 0;
  transform: translateZ(25px) rotateX(4.29128deg) rotateY(5deg);
}

.tilt {
  transform-style: preserve-3d;
}

.event1-info-div {
  padding: 3% 4%;
}

.event2-info-div {
  padding: 3% 4%;
  text-align: end;
  position: relative;
}

.event-image {
  width: 100%;
  object-fit: contain;
  border: 5px solid black;
  border-radius: 5px;
  transition: all 1s ease-in-out;
}

.event-date {
  font-size: 14px;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
}

.event-name {
  font-family: "nove";
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
    1px 1px 0 #000;
  font-size: 25px;
  color: var(--primary-color);
}

.event-description {
  font-size: 17px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;

  overflow: hidden;
  text-overflow: ellipsis;
}
4

0 回答 0