CSS3：3D环绕实现篇
废话不多说，直接给大家看效果：[不仅有背景，还有音乐]
大神请绕道：小白请继续往下看：
是不是心动了呢，心动不如行动：代码在手，天下我有，表白利器可不要错过了。
HTML,CSS代码都在下方，至于图片的话就不在这里粘贴了，把图片路径改成自己喜欢的就可以了。
源代码：
<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<title>3D播放器</title>
???<style>
???????*{
???????????margin: 0;padding: 0;
???????}
???????body{
???????????background-size: cover;background:url("images/image10/bg.jpg") center top;background-repeat: no-repeat;overflow: hidden;
???????}
???????ul{
???????????width: 200px;height: 200px;position: absolute;top: 400px;left: 20%;margin-left: -100px;transform-style: preserve-3d;
???????????transform: rotateX(0deg) rotateY(0deg);animation: play 6s linear 0s infinite normal;
???????}
???????ul li {
???????????list-style: none;width: 200px;height: 200px;line-height: 200px;font-size: 60px;text-align: center;position: absolute;top: 0; left: 0;
???????}
???????ul li img{
???????????width: 200px;height: 200px;border: 5px solid skyblue;box-sizing: border-box;
???????}
???????ul:hover{
???????????animation-play-state: paused;
???????}
???????ul:hover li img{
???????????opacity: 0.7;
???????}
???????ul li:hover img{
???????????opacity: 1;
???????}
???????ul li:nth-child(1){
???????????transform: rotateY(60deg) translateZ(200px);
???????}
???????ul li:nth-child(2){
???????????transform: rotateY(120deg) translateZ(200px);
???????}
???????ul li:nth-child(3){
???????????transform: rotateY(180deg) translateZ(200px);
???????}
???????ul li:nth-child(4){
???????????transform: rotateY(240deg) translateZ(200px);
???????}
???????ul li:nth-child(5){
???????????transform: rotateY(300deg) translateZ(200px);
???????}
???????ul li:nth-child(6){
???????????transform: rotateY(360deg) translateZ(200px);
???????}
???????@keyframes play {
??????????from{
??????????????transform: rotateX(-12deg) rotateY(0deg);
??????????}
???????????to{
???????????????transform: rotateX(-12deg) rotateY(360deg);
???????????}
???????}
???????.heart{
???????????width: 173px;height: 157px;position: absolute;left: 100px;bottom: 100px;animation:plays 5s linear 0s infinite normal;
???????}
???????@keyframes plays {
???????????0%{
???????????????left: 150px;bottom: 150px;opacity: 0.8;
???????????}
???????????20%{
???????????????left: 250px;bottom: 250px;opacity: 0.6;
???????????}
???????????40%{
???????????????left: 350px;bottom: 350px;opacity: 0.5;
???????????}
???????????60%{
???????????????left: 500px;bottom: 500px;opacity: 0.3;
???????????}
???????????80%{
???????????????left: 600px;bottom: 300px;opacity: 0.5;
???????????}
???????????90%{
???????????????left: 800px;bottom: 100px;opacity: 0.8;
???????????}
???????????100%{
???????????????left: 900px;bottom: 0px;opacity: 0.1;
???????????}
???????}
???</style>
</head>
<body>
<ul>
???<li><img src="images/image10/y1.jpeg"></li>
???<li><img src="images/image10/y2.jpg"></li>
???<li><img src="images/image10/y3.jpeg"></li>
???<li><img src="images/image10/y4.png"></li>
???<li><img src="images/image10/y5.jpg"></li>
???<li><img src="images/image10/y6.jpg"></li>
</ul>
<img src="images/image10/xin.png"class="heart"><audio src="images/image10/song.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
</script>
</body>
</html>
CSS3:3D环绕实现
原文地址：http://www.cnblogs.com/fy666/p/7856614.html