CSS3 3D桃心是一種很流行的特效，它可以為網(wǎng)頁增添生動(dòng)感和趣味性。下面就來介紹一下如何實(shí)現(xiàn)它。

//CSS代碼
.heart {
width: 60px;
height: 60px;
transform-style: preserve-3d;
transform: rotateX(45deg) rotateY(0deg) rotateZ(0deg) scale3d(1,1,1);
position: relative;
animation: heartBeat linear infinite;
}
.heart:before,
.heart:after {
top: 0;
left: 30px;
content: "";
position: absolute;
width: 60px;
height: 60px;
background-color: #e74856;
border-radius: 30px 30px 0 0;
transform-style: preserve-3d;
}
.heart:before {
transform: rotateZ(45deg);
}
.heart:after {
transform: rotateZ(-45deg);
}
@keyframes heartBeat {
0% {
transform: scale3d(1, 1, 1);
}
50% {
transform: scale3d(1.2, 1.2, 1.2);
}
100% {
transform: scale3d(1, 1, 1);
}
}

首先，創(chuàng)建一個(gè)有寬度和高度的div，設(shè)置樣式transform-style為preserve-3d，并設(shè)置rotateX、rotateY、rotateZ以及scale3d的數(shù)值，以此來確定這個(gè)div的位置和形狀。

然后，在這個(gè)div里添加before和after兩個(gè)偽元素，分別設(shè)置它們的高度、寬度、背景顏色和邊角半徑，并使用transform的rotateZ來使它們成為一個(gè)心形的形狀，同時(shí)也要記得設(shè)置它們的transform-style為preserve-3d。

最后，為了增加動(dòng)態(tài)效果，為這個(gè)div添加一個(gè)heartbeat的動(dòng)畫效果，使它周期性的放大和縮小。

這樣，一個(gè)漂亮的CSS3 3D桃心就完成了！