CSS3实现3D透明立体盒子

最新推荐文章于 2024-08-29 15:49:54 发布

GaHoOo

最新推荐文章于 2024-08-29 15:49:54 发布

阅读量2.3k

点赞数 3

本文链接：https://blog.csdn.net/GaHoOo/article/details/83178544

版权

想要利用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;
		posit

最低0.47元/天解锁文章

GaHoOo

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
CSS3实现3D透明立体盒子

想要利用CSS3实现透明3D立体盒子就要清楚立方体是由六个面组成，分上下左右和前后，考虑这些可以帮助我们更好的融入CSS3的代码因此我设置了6个div，作为立方体的6个面因为定位的原因，一开始所有的盒子都是面对着屏幕这面的，因此要赋予每个面不一样的值，即不一样的位置它才能展现出来。.trangel div:nth-of-type(1){ left: 0; top:-10...
复制链接

扫一扫