CSS3实现3D透明立体盒子
程序员文章站
2022-03-25 16:45:06
...
想要利用CSS3实现透明3D立体盒子
就要清楚立方体是由六个面组成，分上下左右和前后，考虑这些可以帮助我们更好的融入CSS3的代码
因此我设置了6个div，作为立方体的6个面
因为定位的原因，一开始所有的盒子都是面对着屏幕这面的，因此要赋予每个面不一样的值，即不一样的位置 它才能展现出来。
.trangel div:nth-of-type(1){
left: 0;
top:-100px;
background: -webkit-radial-gradient(rgba(20, 20, 20, 0.1), #000000);
-webkit-transform-origin:bottom; /*设置旋转元素的基点位置：从底部开始*/
-webkit-transform: rotateX(90deg); /*垂直旋转90°*/
}以上是对第一个盒子的样式，先是向上移动-100px的距离，然后再垂直旋转90°，
做好了一个面，其实其他的面就好理解了。
有代码注释，快去自己实现一下效果吧!!!
接下来是全部的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.wrap{
width: 100px;
height: 100px;
padding: 100px;
border: 1px solid black;
margin: 50px auto;
position: relative;
-webkit-perspective-origin:right top; /*可见面*/
-webkit-perspective:600px; /*可见立体长度*/
}
.trangel{
width: 100px;
height: 100px;
position: relative;
-webkit-transform-style: preserve-3d; /*编制3D舞台效果*/
transition: 1s all; /*建立一秒的过渡属性*/
}
.trangel div{
position: absolute;
width: 100px;
height: 100px;
color: #fff;
line-height: 100px;
text-align: center;
}
.trangel div:nth-of-type(1){
left: 0;
top:-100px;
background: -webkit-radial-gradient(rgba(20, 20, 20, 0.1), #000000);
-webkit-transform-origin:bottom; /*设置旋转元素的基点位置：从底部开始*/
-webkit-transform: rotateX(90deg); /*垂直旋转90°*/
}
.trangel div:nth-of-type(2){
left: -100px;
top: 0;
background: -webkit-radial-gradient( #000000, rgba(20, 20, 20, 0.1));
-webkit-transform-origin: right;
-webkit-transform: rotateY(-90deg);
}
.trangel div:nth-of-type(3){
background: -webkit-radial-gradient( #000000, rgba(20, 20, 20, 0.1));
left: 0px;
top: 0;
}
.trangel div:nth-of-type(4){
left: 0px;
top: 100px;
background: -webkit-radial-gradient(rgba(0, 0, 0, 0), #000000);
-webkit-transform-origin: top;
-webkit-transform: rotateX(-90deg);
}
.trangel div:nth-of-type(5){
left: 100px;
top: 0px;
background: -webkit-radial-gradient(#000000, rgba(20, 20, 20, 0.1));
-webkit-transform-origin:left;
-webkit-transform: rotateY(90deg);
}
.trangel div:nth-of-type(6){
left: 0px;
top: 0px;
background: -webkit-radial-gradient(#000000, rgba(20, 20, 20, 0.1));
-webkit-transform:translateZ(-100px) rotateX(180deg);
}
.wrap:hover .trangel{
-webkit-transform: rotateX(180deg) rotateY(360deg) rotateZ(20deg);
}
</style>
</head>
<body>
<div class="wrap">
<div class="trangel">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</div>
</body>
</html>