![CSS 点击按钮以后修改DIV的高度，代码怎么写？[有代码]](/aiimages/CSS+%E7%82%B9%E5%87%BB%E6%8C%89%E9%92%AE%E4%BB%A5%E5%90%8E%E4%BF%AE%E6%94%B9DIV%E7%9A%84%E9%AB%98%E5%BA%A6%EF%BC%8C%E4%BB%A3%E7%A0%81%E6%80%8E%E4%B9%88%E5%86%99%EF%BC%9F%5B%E6%9C%89%E4%BB%A3%E7%A0%81%5D.png)
css是个神奇的东西，在学习的过程中你会发现绘画和艺术的美,金字塔是世界八大奇迹之一，设计精巧，计算精密，令世人赞叹。那么如何用CSS画一个金字塔呢？
人丑话不多，先看一下效果
金字塔是由5个面组成的，即4个侧面和1个底面。我们可以把它看作是一个童年时期玩过的元宝，或者端午节戴在身上的福字。为什么这么说呢？
“横看成岭侧成峰”，我们看金字塔的俯视图是不是会看到这样一个图形，如下图所示
这是一个平面图形，如果让这个平面图形具有立体的效果不就是一个金字塔了么。即将上图的(0,0)沿着x轴旋转一定角度即可实现。
接下来就是绘制“元宝”的形状,侧面是4个三角形，底面是一个正方形。实现三角形可以采用 clip-path 的属性对可视区域进行裁剪。
由上图可知： clip-path 的只能兼容 高版本浏览器 。polygon代表多边形，所以利用该属性可以绘制多如下图形：
有了上述的图形之后，我们需要进行特殊的处理，才能得到我们想要的形状。因为我们要搭建金字塔，所有我们塔边的高度或者宽度需要大于底部的宽度和长度，不然的话无法搭成塔尖而形成如下图形：
故需设置大于底部宽和高,我们这里选取为高度为200px，宽度为100px，宽度需要和底部宽度保持一致。
假设我们现在已经有一个金字塔，我们可以取它的一个横截面如下图：
通过sin函数
解上面反三角函数求得A大约为75deg，以此类推我们可以算出其他图形旋转角度。
将上述的两种三角形通过适当的平移和旋转，得到如下图形：
合并之后得到如下图形
通过使用css3中的3D转化属性，将上图进行转化即可：
由上图可知：transform-style:preserve-3d兼容是支持高版本浏览器，支持部分ie浏览器
以上就是本文的全部内容，全部都是由css实现包括：
教你如何制作具有立体感效果的我们详细的解释与说明CSS代码，看它是如何控制这个UL LI打造CSS横向菜单的：* {font-size:12px text-align:center}#nav {width:520px border-bottom:1px solid #06f margin:20px auto 0 auto}#nav li {display: inline list-style-type: none}#nav li a:link,#nav li a:visited {float:left margin-right:5px padding:5px 10px 5px 8px text-decoration: none color:#000 background:#ffe67d border-left: 5px solid #fc0}#nav li a:hover {color:#060 border-left: 5px solid #f60}首先我们进行了整体布局声明，声明了文字大小及居中的对齐方式。需要说明的是，在ff中，我们设置margin:0 auto。即可实现容器的居中了，但在IE中，这还不够，还需要在父容器中声明text-align:center。这一点我们要记得，不然容易出错。声明UL无序列表的宽度为520ox，下边框一象素的实现，颜色为#06f。我们设置了nav这个UL，距离顶部为20px、距离底部为零，左右的距离为auto。这就实现了nav在水平方向内是居中的，垂直方面上距离浏览器窗口20px。声明LI列表项为内联（行内）显示，列表预设标记为无。我们重点需要理解#nav li a:link,#nav li a:visited的定义，设置链接的样式。向左浮动，并且右边距为5px。这是设置链接元素从左向右排行，并且元素之间的右部间隔5px。设置填充，顶5px、右10px、下5px、左8px。这一设置可以使我们的链接文字处于合适的位置。取消链接文字的下划线，并设置链接文字的颜色为#000。链接元素的背景色为#ffe67d。左边框五象素的实线，颜色为#fc0。这一句话形成了我们的小竖条。我们通过下面#nav li a:hover形成鼠标激活的样式。链接文字的颜色变为#060。左边框五象素的实线，颜色为#f60。这样我们会动的小竖条菜单就制作完成了。看最终的代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" /><title>免费模板</title><style type="text/css">* {font-size:12px text-align:center}#nav {width:520px border-bottom:1px solid #06f margin:20px auto 0 auto}#nav li {display: inline list-style-type: none}#nav li a:link,#nav li a:visited {float:left margin-right:5px padding:5px 10px 5px 8px text-decoration: none color:#000 background:#ffe67d border-left: 5px solid #fc0}#nav li a:hover {color:#060 border-left: 5px solid #f60}</style></head><body><ul id="nav"> <li><a href="#">图象设计</a></li> <li><a href="#">网站运营</a></li> <li><a href="#">网络编程</a></li> <li><a href="#">创业指南</a></li> <li><a href="#">网站欣赏</a></li></ul></body></html>具体步骤如下：
一、立方体结构中，使用一个wrapper div来包裹立方体。在里面使用6个div来制作立方体的6个面。
二、立方体的每一个面都有它自己的元素。我们稍后会使用CSS来将立方体的6个面放置到正确的位置上。
三、在立方体的CSS样式中，首先要关注的是立方体的wrapper div。为了制作3D效果，我们需要为它提供一个 CSS perspective。
四、CSS perspective属性是一个比较复杂的CSS3属性。最好的理解它的方法是看完文档后，自己动手修改一下DEMO中的perspective属性来看看它的变化。
下面需要给包含立方体6个面的立方体的容器.cube提供样式：
1、.cube {
position: relative
width: 200px
transform-style: preserve-3d
2、给立方体容器200像素的宽度，并设置为相对定位，这样在它里面的立方体的6个面可以设置为绝对定位。
3、preserve-3d属性确保所有6个面都处于3D立体状态。
4、在为6个面设置它们的位置之前，先给它们一些通用的样式：
.cube div {
position: absolute
width: 200px
height: 200px
}
5、在进过上面对立方体6个面的一系列设置之后，现在我们可以为6个面制作变形效果，以使它们组装为一个立方体。
6、rotateY的值可以旋转立方体的各个面，使上面的文字处于正确的位置上。
7、而 translateZ 的值使元素在指定容器中向前或向后移动。translateY的值看起来有些混乱，但是请记住，它的作用是通过透明的面板来使指定的面升高或降低来制作3D效果。
8、每一个面都有自己的translations值来使它们处于适当的位置上。你可以自己修改一下这些值来看看效果。
