H5学习---html，css---3D 动画

原创于 2020-08-05 20:10:47 发布 · 338 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #css3

H5 同时被 2 个专栏收录

19 篇文章

订阅专栏

前端

16 篇文章

订阅专栏

本文详细介绍3D CSS属性的应用，包括perspective设置视距，perspective-origin调整观察角度，transform-style保持3D空间，backface-visibility隐藏背面，以及translateZ、translate3d、rotateX、rotateY、rotateZ、rotate3d、scaleZ等变换操作。同时讲解了如何使用@keyframes定义动画，animation属性控制动画播放，实现丰富的视觉效果。

部署运行你感兴趣的模型镜像

3D

- perspective元素距离视线的距离(1000-3000px)
	模拟近大远小效果,添加给父元素
- perspective-origin观察子元素的视角(默认值为中心点)
- transform-style:preserve-3d;子元素保留3d转换位置
- backface-visibility: hidden;子元素背面不可见,添加给子元素
- 位移
	transform: translateZ(300px);沿着z轴移动
	transform: translate3d(100px,200px,300px);xyz轴共同作用
- 旋转
	transform:rotateX(45deg);
	transform:rotateY(45deg);
	transform:rotateZ(45deg);就是2d的顺逆时针
	transform:rotate3d(x,y,z,45deg);
- 缩放
	transform:scaleZ();

动画

- 定义动画
	@keyframes 动画名称{
		/*定义关键帧*/
		0%{
			background:red;
		}
		50%{
			background:yellow;
		}
		100%{
			background:green;
		}
	}
- 执行动画
	animation:动画名称  持续时间  过渡类型  延迟时间  次数  是否反向;
		过渡类型：匀速linear
		次数：无限次infinite
		是否反向：反向运动alternate
	animation-play-state:paused;动画暂停
- 前缀
	-webkit- 谷歌和Safari
	-ms- IE的
	-o- Opera
	-moz- 火狐

您可能感兴趣的与本文相关的镜像