这看起来很简单,但我错过了一些东西,因为我不能让它运行.
我想使用perspective()
和rotateY()
函数的transform来创建元素的透视图.然后使用转换在悬停时更新变换属性的值.并将rotateY()
值更改为负值,以从左到右镜像透视效果.
My App.tsx that is not working
我声明了所有样式并将其内联apply.
import React from 'react';
import { Box } from '@mui/material';
const styles = {
imageCard: {
display: ' inline-block',
boxSizing: 'border-box',
margin: '1rem',
width: '240px',
height: '320px',
padding: '8px',
borderRadius: '1rem',
background: 'url(https://picsum.photos/id/1049/240/320)',
boxShadow: 'rgba(0, 0, 0, 0.25) 0px 25px 50px -12px',
},
perspectiveLeft: {
transform: 'perspective(1500px) rotateY(15deg)',
transition: 'transform 1s ease 0s',
},
'perspectiveLeft:hover': {
transform: 'perspective(3000px) rotateY(5deg)',
},
perspectiveRight: {
transform: 'perspective(1500px) rotateY(-15deg)',
transition: 'transform 1s ease 0s',
},
'perspectiveRight:hover': {
transform: 'perspective(3000px) rotateY(-5deg)',
},
};
function Perspective() {
return (
<Box styles={styles.imageCard}>
<Box style={styles.perspectiveLeft}></Box>
<Box style={styles.perspectiveRight}></Box>
</Box>
);
}
export { Perspective };