我发现了这个漂亮的3D悬停图像效果-https://codepen.io/kw7oe/pen/mPeepv

为了获取信息,我在React TS中构建了它.

import React from 'react';
import { Box, Typography } from '@mui/material';
import Image from 'mui-image';

const styles = {
    body: {
        background: '#ECECEC',
    },

    footer: {
        width: '50%',
        marginLeft: '25%',
        textAlign: 'center',
        fontFamily: 'Julius Sans One, sans-serif',
        marginTop: '24px',
    },

    container: {
        maxWidth: '720px',
        margin: '24px auto 48px auto',
    },

    h1: {
        fontFamily: 'Montserrat, sans-serif',
        textTransform: 'uppercase',
    },

    h2: {
        fontFamily: 'Julius Sans One, sans-serif',
        fontSize: '2.5rem',
    },

    row: {
        marginTop: '12px',
    },

    column: {
        display: 'inlin-block',
        textAlign: 'center',
    },

    figure: {
        overflow: 'hidden',
    },

    'a:hover': {
        textDecoration: 'none',
    },

    'column img': {
        display: 'block',
        width: '100%',
        height: '300px',
    },

    tdimension: {
        width: '300px',
        height: '300px',
        margin: '20px auto 40px auto',
        perspective: '1000px',
    },
    'tdimension a ': {
        display: 'block',
        width: '100%',
        height: '100%',
        backgroundSize: 'cover',
        transformStyle: 'preserve-3d',
        transform: 'rotateX(70deg)',
        transition: 'all 0.8s',
    },
    'tdimension:hover a': {
        transform: 'rotateX(20deg)',
    },

    'tdimension a:after': {
        content: '',
        position: 'absolute',
        left: 0,
        bottom: 0,
        width: '100%',
        height: '40px',
        background: 'linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1))',
        transform: 'rotateX(90deg)',
        transformOrigin: 'bottom',
    },
};

function Hover() {
    return (
        <Box style={styles.container}>
            <Box style={styles.row}>
                <Typography style={styles.h1}>Image Hover Effect</Typography> <Typography style={styles.h2}>3D Hover Effect</Typography>
            </Box>
            <Box style={styles.row}>
                <Box style={styles.tdimension}>
                    <Image src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/e8346826957515.56361c2106f3f.png" style={styles['tdimension a ']}/>
                    <a href="#"></a>
                </Box>
            </Box>
        </Box>
    );
}

export { Hover };


推荐答案

我将用sx替换所有style个属性,因为MUI鼓励使用sx属性,并且更喜欢它而不是style属性:

我还将坚持<a/>中的background url,因为3D悬停效果转换正在应用于该标记.

return (
  <Box sx={styles.container}>
    <Box sx={styles.row}>
      <Typography sx={styles.h1}>Image Hover Effect</Typography>
      <Typography sx={styles.h2}>3D Hover Effect</Typography>
    </Box>

    <Box sx={styles.row}>
      <Box sx={styles.tdimension}>
        <a href="#"></a>
      </Box>
      <Divider sx={{ padding: "1px" }} />
    </Box>
  </Box>
);

现在在styles对象中,将与tdimension相关的所有内容封装在嵌套的Styleing对象中.你的<Box/>使用了styles.tdimension,这样你的所有子序列就不会丢失.

  ...
  tdimension: {
    width: "300px",
    height: "300px",
    margin: "20px auto 40px auto",
    perspective: "1000px",
    a: {
      background:
        'url("https://mir-s3-cdn-cf.behance.net/project_modules/disp/e8346826957515.56361c2106f3f.png")',
      display: "block",
      width: "100%",
      height: "100%",
      backgroundSize: "cover",
      transformStyle: "preserve-3d",
      transform: "rotateX(70deg)",
      transition: "all 0.8s",
    },
    "&:hover a": {
      transform: "rotateX(20deg)",
    },
    "a:after": {
      content: '""',
      position: "absolute",
      left: 0,
      bottom: 0,
      width: "100%",
      height: "40px",
      background: "linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1))",
      transform: "rotateX(90deg)",
      transformOrigin: "bottom",
    },
  },

结果应该与现在的代码笔非常一致.

Css相关问答推荐

容器内的中心固定元件

如何使用在另一个层定义块中定义的sass层作用域变量

如何使用CSS滚动驱动动画重复时间轴范围

有没有办法将px单位添加到 Sass mixin 的参数数组中?

SCSS - Lighten/Darken 不编译?

当前的 html 标签没有发生两列布局

Vue.js 变量中的动态类变量

如何在父叠加层之上呈现子子

CSS动画移动divs upwords

老虎机插槽上的 CSS 对齐问题

使用 CSS 填充悬停过渡的闪烁文本问题

你如何调试可打印的 CSS?

如何倾斜元素但保持文本正常(未倾斜)

我应该使用 CSS :disabled 伪类还是 [disabled] 属性 Select 器,还是见仁见智?

如何在需要时通过 HTTPS 包含 CSS 和 JS 文件?

删除所有填充和边距表格 HTML 和 CSS

IE划掉伪元素CSS?

内联