直奔主題,就不贅述了!且看如下:

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>3D立方體</title>

<style>

.box{

width: 249px;

height: 249px;

border: 1px dashed #000;

margin: 120px auto;

border-radius: 250px;

position: relative;

/* 讓子盒子保持3D效果 */

transform-style: preserve-3d;

/* 父盒子變換 */

/* transform:rotateX(30deg) rotateY(-30deg); */

/* 動畫*/

animation: gun 8s linear infinite;

}

/* 愛心 */

.box::before,.box::after{

content: "";

width: 50px;

height: 80px;

background: pink;

position: absolute;

border-radius: 50px 50px 0 0;

top: 50%;

left: 50%;

}

.box::before{

transform: rotate(-45deg);

margin-left: -36px;

margin-top: -40px;

}

.box::after{

transform: rotate(45deg);

margin-left: -16px;

margin-top: -40px;

}

@keyframes gun{

0%{

transform:rotateX(0deg) rotateY(0deg)

}

100%{

transform:rotateX(360deg) rotateY(360deg)

}

}

/* 選中box下面的所有div */

.box > div{

width: 100%;

height: 100%;

text-align: center;

line-height: 250px;

font-size: 60px;

position: absolute;

color: #fff;

}

/* 左盒子 */

.left{

background-color: rgba(255,0,0,0.3);

transform-origin: left;

transform: rotateY(-90deg) translateX(-125px);

}

/* 右盒子 */

.right{

background-color:rgba(0,255,0,0.3);

transform-origin: right;

transform: rotateY(90deg)translateX(125px);

}

/* 前盒子 */

.forward{

background-color: rgba(0,0,255,0.3);

transform: translateZ(125px);

}

/* 後盒子 */

.back{

background-color: rgba(0,125,125,0.3);

transform: rotateY(-180deg) translateZ(125px);

}

/* 上盒子 */

.up{

background-color: rgba(125,125,0,0.3);

transform: rotateX(90deg) translateZ(125px);

}

/* 下盒子 */

.down{

background-color: rgba(125,125,225,0.3);

transform: rotateX(-90deg) translateZ(125px);

}

</style>

</head>

<body>

<div>

<div>上</div>

<div>下</div>

<div>左</div>

<div>右</div>

<div>前</div>

<div>後</div>

</div>

</body>

</html>

創作者介紹

vz4850644的部落格

陌上塵 發表在 痞客邦 PIXNET 留言(0) 人氣()