CSS3制作正方体

2024-03-04 19:05:06

<!DOCTYPE html><html>
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css3制作立方体</title> <link rel="stylesheet" href="https://stackedit.io/style.css" /></head>
<body class="stackedit"> <div class="stackedit__html"><h2><a id="_0"></a>一、预备知识</h2><ol><li>变形属性</li></ol>2D变形属性<blockquote>transform:他是css3中的变形属性: 通过transform(变形) 来实现2d 或者3d 转换,其中2d 有，缩放 scale(x, y) ，移动 translate(x, y)，旋转 rotate(deg),倾斜 skew(deg, deg) ,矩阵matrix() ，3D就是在2D基础上增加了Z轴，2D属性仍可以使用。</blockquote>3D转换属性<blockquote><ol><li>透视（perspective）景深（900-1200） 电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。 透视可以将一个2D平面，在转换的过程当中，呈现3D效果。</li></ol></blockquote><blockquote><ol start="2"><li>3D呈现（transform-style),值为preserve-3d：保留3D空间(本次正方形就是利用此) 形成一个3D空间：( 让父元素形成3D，让其子元素在3D空间进行变化 )</li></ol></blockquote><blockquote><ol start="3"><li>backface-visibility：设置元素背面是否可见</li></ol></blockquote><h2><a id="_20"></a>二、步骤：</h2>1、首先设置一个大盒子包裹住六个div<pre><code class="prism language-html"> <div class="box"> <div class="con1">1</div> <div class="con2">2</div> <div class="con3">3</div> <div class="con4">4</div> <div class="con5">5</div> <div class="con6">6</div> </div></code></pre>2、 让正方体呈现3D效果<blockquote>形成一个3D空间：( 让父元素形成3D，让其子元素在3D空间进行变化 )</blockquote><pre><code class="prism language-css">.box{ width:300px; height:300px; position:fixed; left:0;right:0; top:0;bottom:0; margin:auto; /* 3D的空间 */ transform-style: preserve-3d; /* 为了方便观察让3D舞台转动角度 */ transform:rotateX(20deg) rotateY(30deg); transition:2s; }</code></pre>3.、定位6个面，使其在正方形里面<pre><code class="prism language-css">.box div{ width:300px; height:300px; text-align: center; line-height:300px; font-size: 100px; font-weight:bolder; color:#fff; /* 让6个面全部定位在父元素里面 */ position:absolute; left:0;top:0; /* 透明 */ opacity:0.5; border:2px solid #000;
}</code></pre>现在的效果看一下： <img src="https://www.icode9.com/i/ll/?i=20200308212510430.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjgwNzQ2,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述">4、接下来就要为每个面来进行位移和旋转<pre><code class="prism language-css"> .con1{ /* 第一个面往前走 */ background:red; transform:translateZ(150px); } .con2{ /* 第二个面往后走 */ background:blue; transform:translateZ(-150px) rotateY(180deg); /*rotateY(180deg) 让正面朝外*/ } .con3{ /* 先往上位移150px 再绕着X轴转动90deg */ background:pink; transform:translateY(-150px) rotateX(90deg); } .con4{ /* 先往下位移150px,再绕着X轴转动90deg */ background:green; transform:translateY(150px) rotateX(-90deg); }
.con5{ /* 先往左位移150px , 再绕着Y轴转动90deg */ background:rosybrown; transform:translateX(-150px) rotateY(-90deg); } .con6{ /* 先往右侧位移150px,再绕着Y轴转动90deg */ background:#000; transform:translateX(150px) rotateY(90deg); }
</code></pre>我们再来看下效果就出来了 <img src="https://www.icode9.com/i/ll/?i=20200308213047845.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjgwNzQ2,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"> 以下两个属性不是必须的，为了显示，我们都学习下。5、这里我加了给元素加backface-visibity:hidden;就可使元素背面不可见<pre><code class="prism language-css">.box div{ /* 使背面不可见！ */ backface-visibility:hidden; }</code></pre><img src="https://www.icode9.com/i/ll/?i=20200308213430244.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjgwNzQ2,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述">6、最后我们在将开头提到的“景深”应用下一般我们都在父元素中加<pre><code class="prism language-css">.box{perspective: 1200px;}</code></pre>通常的数值在900-1200之间 如果当你的视线距离物体足够远的时候，基本上就不会有近大远小的感觉对比下，既可以看到效果 <img src="https://www.icode9.com/i/ll/?i=2020030821402781.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjgwNzQ2,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></div></body>
</html>

码农公寓

相关文章