龙空技术网

酷炫的CSS3-3D立方体效果,你会做吗

软件开拓者 202

前言:

目前姐妹们对“酷炫的css3效果简单”可能比较关怀,咱们都想要分析一些“酷炫的css3效果简单”的相关资讯。那么小编也在网络上汇集了一些对于“酷炫的css3效果简单””的相关知识,希望同学们能喜欢,看官们一起来学习一下吧!

直奔主题,就不赘述了!且看如下:

<!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>

标签: #酷炫的css3效果简单