HTML/CSS实现2D/3D效果知识笔记

光看不练等于笨蛋

    这里记录我对html的学习过程，每天练习了新的知识在这里记录。

HTML/CSS实现2D效果

实现2D效果用到了transform,有一下几个功能。

• rotate 旋转
• transform-origin
• skew 拉伸/压缩
• scale 放大/缩小
• translate 移动

因为这些效果是突然变化的所以使用过渡会看着舒服一些，用到了transition
下面举例说明以上效果的用法。

transform:rotate(-45deg);	<!--旋转的角度可以输正负-->
transform-origin:top left;	<!--修改旋转的基点，这里为左上角-->
transform:skew(45deg,30deg)	<!--拉伸可以输入两个值，代表X/Y轴-->
transform:scale(-2,1)		<!--可以输入两个值，负值为颠倒，1为不变，大于1是放大，小于1是缩小-->	
transform：translate(-100px,100px)
							<!--左边移动100px，下边移动100px-->
transition:all 1s 3s linear	<!--整个元素三秒后匀速移动，1s内移动完成-->

HTML/CSS实现3D效果

3D和2D类似，也使用到了rotate（旋转）和translate（位移），不过3D使用的是rotate3d() 和 translate3d(),这两个比较常用，scale3d() 不常用。

• rotate3d(x,y,z,angel)：旋转 x/y/z的值为1时代表旋转，为0时代表不旋转
• translate3d(x,y,z)：平移
• scale3d(x,y,z)：缩放

3D效果直接写在页面上是看不到的，需要加一个属性：perspective，设置从哪里看界面上的元素。

perspective:1080px;			<!--增加3d效果-->
perspective-origin:0 0;		<!--改变观看的位置，默认是从页面中心去看-->
transform:rotate3d(1,0,0,45deg);
							<!--X轴旋转45°-->
transform:rotateX(-45deg);	<!--X轴逆时针旋转45°-->
transform:translate(100px,0,0);
							<!--向右移动100px-->
tansform:translateX(-100px)	<!--向左移动100px-->

transfrom:scale3d(1,1,1)
<!--X/Y轴放大和2d是一样的，Z轴放大是变厚了，页面上看不出来。-->

3D相比于2D缺少了一个拉伸skew的功能。

今天先到这里~~