做法:
平面div,設置前後僞類分別覆蓋一半大小,設置前面的僞類旋轉點爲最左邊的線,旋轉角度爲負值向外
設置後面的僞類旋轉點爲最右邊的線,旋轉角度爲正值向內
設置最外層元素transform-style: preserve-3d;可以查看3d效果
transform: perspective(900px) rotateX(45deg) rotateY(25deg);透視和旋轉一定角度增強立體感
代碼示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./index.css">
<style>
.box{
width: 400px;
height: 400px;
border: solid 1px blueviolet;
display: flex;
align-items: center;
justify-content: center;
}
.d1{
width: 300px;
height: 200px;
background-color: orange;
position: relative;
transform-style: preserve-3d;
transform: perspective(900px) rotateX(45deg) rotateY(25deg);
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.d1::before,.d1::after
{
content: '';
background-color:#E34336;
width: 50%;
height: 100%;
position:absolute;
border-right: solid 2px orange;
box-sizing: border-box;
}
.d1::before{
content: '生日';
color: white;
left: 0;
top: 0;
display: flex;
justify-content: flex-end;
align-items: center;
transition: 2s;
transform-origin: left;
}
.d1::after{
content: '賀卡';
color: white;
right: 0;
top: 0;
display: flex;
justify-content: flex-start;
align-items: center;
transition: 2s;
transform-origin: right;
}
.d1:hover::before{
transform:rotateY(-180deg);
}
.d1:hover::after{
transform:rotateY(180deg);
}
</style>
</head>
<body class='me'>
<div class='box'>
<div class='d1'>生日快樂</div>
</div>
</body>
</html>
效果圖:
