html5+css3的第7天使用工具：HBuilder X

最新推荐文章于 2024-07-20 22:13:44 发布

竹叶依旧

最新推荐文章于 2024-07-20 22:13:44 发布

阅读量240

点赞数

分类专栏： html5+css3基础文章标签： css3 html5

本文链接：https://blog.csdn.net/qq_46426476/article/details/121757483

版权

9 篇文章 0 订阅

订阅专栏

转换:

transform：

平移:

2d:
translate(x,y);

3d：
translateX();
translateY();
translateZ();
translate3d();

旋转:

2d:
rotate(30deg)
3d:
rotateX()
rotateY()
rotateZ()

缩放:

scale(number);

拉伸:

skew()

3d：

3d透视:
perspective：;


**转换子元素透视**:

```css
```html
transform-style: preserve-3d;


**动画**：
**定义动画**：

```css
@keyframes name{
	关键帧
	开始:
	from{
		
	}
	to{
		
	}
	-------
	0%{
		
	}
	....
	
	100%{
		
	}
	
}

调用:

animation:name 完成;

1、3d 照片强（酒杯效果）
2、flex 网页布局

flex 弹性盒模型:
移动端布局的解决方案。
display:flex;（弹性容器）
默认存在两根轴线：主轴（默认的主轴是x轴）、交叉轴(从轴y轴)

容器的主轴:
flex-direction:row（默认值）|column|row-reverse|column-reverse;

项目在主轴上的对齐方式:
jsutify-content:flex-start|end|space-between|around|…;

项目在从轴上的对齐方式:
align-items:flex-start|end|center;

项目主轴是否换行显示:
flex-wrap:nowrap|wrap;
…

子元素:项目
order:排序|number;
flex-grow:成长比 1;

<div display:flex;>
   项目
  <div>
       <div>正常元素</div>
  </div>
   <div></div>
    <div></div>
</div>

关注