css实现3d立体魔方的示例代码使用纯CSS实现3D旋转效果的示例代码CSS3实现酷炫的3D旋转透视效果利用css制作3D照片墙效果css3实现可拖动的魔方3d效果 从css 3d说到空间坐标轴附源码CSS3 3D酷炫立方体变换动画的实现CSS3之2D与3D变换的实现方法简单几步用纯CSS3实现3D翻转效果css3实现3D文本悬停改变效果的示例代码CSS实现卡片3D翻转效果的示例代码

 *{ margin:0; /* 默认样式去掉边距 */ padding:0; } div{ /* div通用样式 设置高宽*/ width: 300px; height: 300px; opacity:0.5; /*透明度 半透明*/ } .top{ /* 通过类名设置颜色下面都是设置颜色*/ background-color:brown; } .bottom{ background-color:blueviolet; } .left{ background-color:blanchedalmond; } .right{ background-color:cadetblue; } .after{ background-color:chocolate; } .before{ background-color:cyan; }

 div{ width: 300px; height: 300px; position: absolute; /*在div的通用样式中加上绝对定位*/ } body{ /*下面这一步是居中让所有的div在屏幕上居中*/ height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; }

 body{ transform-style: preserve-3d; /*只需要这一条代码开启3d空间*/ height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; }

 .top{ background-color:brown; transform:rotateX(90deg) translateZ(150px); /*先旋转在偏移*/ } .bottom{ background-color:blueviolet; transform:rotateX(-90deg) translateZ(150px); } .left{ background-color:blanchedalmond; transform:rotateY(-90deg) translateZ(150px); } .right{ background-color:cadetblue; transform:rotateY(90deg) translateZ(150px); } .after{ background-color:chocolate; transform:rotateY(180deg) translateZ(150px); } .before{ background-color:cyan; transform:rotateY(0deg) translateZ(150px); }

1
2
3
4
5
6