以下代码利用css动画效果制作了一个旋转的正方体,给正方体六个面放置好图片就可以当一个炫酷有趣的正方体旋转相框啦!可以将女朋友的照片放进去哦,赶快去试试,给女朋友一个惊喜吧!
下面没有放入背景建议大家可以自己设置一下背景,让画面更浪漫。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.fa {
position: relative;
height: 310px;
width: 310px;
margin: 200px auto;
transform-style: preserve-3d;
transform: rotate3d(1, 0, 0, 0deg);
animation: zheng;
animation-duration: 20s;
animation-iteration-count: infinite;
}
div>img {
height: 200px;
wid