micoria的博客

6. 3D转换 6.1 三维坐标系 三维坐标系指立体空间，是由3个轴共同组成的。 x轴：水平向右 注：x右边是正值，左边是负值 y轴：水平向下 注：y下面是正值，上面是负值 z轴：垂直屏幕 注：往外是正值，往里是负值 6.2 3D位移 tranlate3D 语法： transform: translateX() translateY() translateZ() 属性 描述 translateX 沿着X轴移动 translateY 沿着Y轴移动 translateZ 沿着Z轴移动

5.2 动画 过渡：鼠标经过和离开才可以触发。 动画：可以自己自动触发。 5.2.1 动画的基本使用 先定义动画。 在使用（调动）动画。 用@keyframes 定义动画 @keyframes move（动画名称） { 0% { /*起始状态*/ transform: translate(0,0); } 100% { /*中止状态*/ transform: translate(500px,500px) scale(1.3) rotate(180deg); } } 调用动画

5.1 transform转换 5.1.1 translate(x,y) 位移 可以改变元素在页面中的位置，类似定位。 经常和transition过渡配合做出相对应的效果。 补充： 现在可以将盒子移动的方式有哪些？ 定位 （相对定位不会影响其他盒子的位置） 外边距（margin） 2D转换 区别：和以上两种方式不同的是，2D转换不会影响其他盒子的位置（可以和position组合进行盒子垂直居中定位，下面有案例） 语法 transform: translate(x , y); tr

效果如图： 代码展示： <style> * { margin: 0; padding: 0; } .box { position: relative; width: 800px; height: 800px; background-color: #999999; }