光看不练等于笨蛋
这里记录我对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的功能。
今天先到这里~~