• 使用css制作3D盒子，目的是把盒子并列制作成3D货架

    注意事项：这个正方体的其他面的角度很难调，因此如果想动态生成，需要很复杂的设置动态的角度，反正我是折腾了半天没继续搞下去，

    1. 首先看效果（第一个五颜六色的是透明多个面，第2-3都是只有3个面是我实际需要的，右边的有3个并列的正方体与3个并列的长方体）：

    长方体与正方体，所有代码：

    1. html>
    2. <html lang="zh-CH">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Documenttitle>
    8.  
    9.   <style>
    10.     body {
    11.        width: 100%;
    12.       height: 100%;
    13.     }
    14.     .box {
    15. 	  float: left;    margin: 5%;  /*只是把两个div放一行，并相隔开*/
    16.       width: 200px;
    17.       height: 200px;
    18.       background-color: skyblue;
    19.  
    20.       /* 在父元素中添加transform-style启用3d空间 */
    21.       transform-style: preserve-3d;
    22.       /* 在父元素中添加透视效果 */
    23.       /* perspective: 200px; */
    24.  
    25.       transform: rotateX(353deg) rotateY(45deg);
    26.     }
    27.     .item {
    28.       position: absolute;
    29.       top: 0;
    30.       left: 0;
    31.       width: 100%;
    32.       height: 100%;
    33.     }
    34.  
    35.     .top {
    36.       background-color: rgba(255, 0, 0, 0.4);
    37.       transform: rotateX(90deg) translateZ(100px);
    38.     }
    39.  
    40.     .bottom {
    41.       background-color: rgba(0, 255, 0, 0.4);
    42.       transform: rotateX(-90deg) translateZ(100px);
    43.     }
    44.  
    45.     .front {
    46.       background-color: rgba(100, 100, 100, 0.4);
    47.       transform: rotateY(0deg) translateZ(100px);
    48.     }
    49.  
    50.     .back {
    51.       background-color: rgba(100, 100, 100, 0.4);
    52.       transform: rotateY(-180deg) translateZ(100px);
    53.     }
    54.  
    55.     .left {
    56.       background-color: rgb(54 72 211 / 78%);
    57.       transform: rotateY(-90deg) translateZ(100px);
    58.     }
    59. 	
    60.     .right {
    61.       background-color: rgba(255, 255, 0, 0.4);
    62.       transform: rotateY(90deg) translateZ(100px);
    63.     }
    64. 	
    65.  
    66. 	.top2 {background-color: #081b61;transform: rotateX(90deg) translateZ(100px) rotatez(58deg); }
    67. 	.left2 {background-color: #2949bf; transform: rotateY(303deg) translateZ(100px);}
    68. 	.right2 { background-color: #949aad; transform: rotateY(33deg) translateZ(100px); }
    69. 	
    70. 	.box1 {
    71. 		float: left;
    72. 		margin: 5px;
    73. 		width: 50px;
    74. 		height: 50px;
    75. 		transform-style: preserve-3d;
    76. 		transform: rotateX(353deg) rotateY(45deg);
    77. 	}
    78. 	
    79. 	/*小正方体*/
    80. 	.top3 {
    81. 		background-color: #4b598d;
    82. 		transform: rotateX(90deg) translateZ(23px) rotatez(154deg) rotatey(2deg);
    83. 	}
    84. 	.left3 {
    85. 		background-color: #2949bf;
    86. 		transform: rotateY(304deg) translateZ(30px);
    87. 	}
    88. 	.right3 {
    89. 		background-color: #5f71a9;
    90. 		transform: rotateY(23deg) translateZ(27px);
    91. 	}
    92.  
    93.   style>
    94. head>
    95. <body>
    96.   
    97.  
    98.   <div class="box">
    99.     父元素
    100.     <div class="item top">topdiv>
    101.     <div class="item bottom">bottomdiv>
    102.     <div class="item front">frontdiv>
    103.     <div class="item back">backdiv>
    104.     <div class="item left">leftdiv>
    105.     <div class="item right">rightdiv>
    106.   div>
    107.   
    108.     <div class="box">
    109.     父元素
    110.     <div class="item top2">div>
    111.     <div class="item left2">div>
    112.     <div class="item right2">div>
    113.   div>
    114.   
    115.    <div class="box">
    116.     父元素
    117.     <div class="item" style="background-color: #081b61;transform: rotateX(90deg) translateZ(100px) rotatez(49deg);">div>
    118.     <div class="item" style="background-color: #2949bf; transform: rotateY(311deg) translateZ(100px);">div>
    119.     <div class="item" style="background-color: #949aad;transform: rotateY(40deg) translateZ(100px);">div>
    120.   div>
    121.   
    122.    <div>
    123. 	  <div style="float: left; margin: 5px; width: 50px; height: 50px; transform-style: preserve-3d;transform: rotateX(353deg) rotateY(45deg);">  
    124. 		<div class="item top3">div>
    125. 		<div class="item left3">div>
    126. 		<div class="item right3">div>
    127. 	  div>
    128. 	  <div class="box1">   
    129. 		<div class="item top3">div>
    130. 		<div class="item left3">div>
    131. 		<div class="item right3">div>
    132. 	  div>
    133. 	  <div class="box1">
    134. 		<div class="item top3">div>
    135. 		<div class="item left3">div>
    136. 		<div class="item right3">div>
    137. 	  div>
    138.   div>
    139. <br><br><br>
    140.  
    141.  <div>
    142. 	  <div style="width:80px;float: left; margin: 5px;height: 50px; transform-style: preserve-3d;transform: rotateX(353deg) rotateY(45deg);">  
    143. 		<div class="item" style="background-color: #414349;transform:rotateX(94deg) translateZ(26px)  translatex(8px) translatey(18px) rotatez(81deg) rotatey(0deg)">div>
    144. 		<div class="item" style="background-color: #5275f5;transform:rotateY(313deg) translateZ(2px)">div>
    145. 		<div class="item" style="background-color: #2e4495;transform:rotateY(26deg) rotateZ(4deg) translateZ(55px) translateY(-4px)">div>
    146. 	  div>
    147. 	  <div style="width:80px;float: left; margin: 5px;  height: 50px; transform-style: preserve-3d;transform: rotateX(353deg) rotateY(45deg);">  
    148. 		<div class="item" style="background-color: #414349;transform:rotateX(94deg) translateZ(26px)  translatex(8px) translatey(18px) rotatez(81deg) rotatey(0deg)">div>
    149. 		<div class="item" style="background-color: #5275f5;transform:rotateY(313deg) translateZ(2px)">div>
    150. 		<div class="item" style="background-color: #2e4495;transform:rotateY(26deg) rotateZ(4deg) translateZ(55px) translateY(-4px)">div>
    151. 	  div> 
    152. 	  <div style="width:80px;float: left; margin: 5px; height: 50px; transform-style: preserve-3d;transform: rotateX(353deg) rotateY(45deg);">  
    153. 		<div class="item" style="background-color: #414349;transform:rotateX(94deg) translateZ(26px)  translatex(8px) translatey(18px) rotatez(81deg) rotatey(0deg)">div>
    154. 		<div class="item" style="background-color: #5275f5;transform:rotateY(313deg) translateZ(2px)">div>
    155. 		<div class="item" style="background-color: #2e4495;transform:rotateY(26deg) rotateZ(4deg) translateZ(55px) translateY(-4px)">div>
    156. 	  div>
    157.   div> 
    158. body>
    159. html>

  • 相关阅读:
    jQuery常用API--选择器
    安全与HTTP协议：为何明文传输数据成为争议焦点？
    node.js--简介、特点、控制台常用指令、http模块、fs模块
    【tg】9 ： InstanceImpl 、 虚拟的音频渲染设备FakeAudioDeviceModuleImpl
    供应链系统有哪些功能？供应链系统能够为企业创造什么价值？
    （附源码）计算机毕业设计SSM金牛社区疫情防控系统
    JDBC 在性能测试中的应用
    【git系列4/4】如何设置core.autocrlf | core.safecrlf （配置值的含义及最佳实践）
    Linux内核分析与应用
    Redis-使用java代码操作Redis-＞java连接上redis，java操作redis的常见类型数据存储，redis中的项目应用
  • 原文地址：https://blog.csdn.net/qq3892997/article/details/133606842