CSS3 2D、3D转换

1.CSS3 2D转换

转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的唯一、旋转、缩放等效果

  • 移动:translate
  • 旋转:rotate
  • 缩放:scale

1.移动

transform:translate(x,y);  或者分开写
transform:translateX(n);
transform:translateY(n);
  • 不会影响到其他元素的位置
  • translate中的百分比单位是相对于自身元素的translate:(50%,50%)
  • translate对于行内元素是无效的

2.旋转

transform:rotate(度数)
  • rotate里面跟度数,单位是 deg 比如 rotate(45deg)
  • 角度为正时,顺时针,负时,为逆时针
  • 默认旋转的中心点是元素的中心点

2D设置转换中心点 transform-origin

transform-origin:x y;
  • x y 默认转换的中心点是元素的中心点(50% 50%)
  • 还可以给x y 设置 像素 或者 方位名词( top bottom left right center)

3.缩放scale

transform:scale(x,y);

4.2D转换综合写法

  • 同时使用多个转换,其格式为:transform:translate() rotate() scale()…等
  • 其顺序会影响转换的效果
transform:translate(150px,50px) totate(180deg) scale(1.2)

2.CSS3动画

动画(animation)是CSS3中就有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果

制作动画分为两步:

1.先定义动画

2.再使用(调用)动画

1.用keyframes定义动画(类似定义类选择器)

@keyframs 动画名称{
	0%{
		width:100px;
	}
	100%{
		width:200px;
	}
}

动画序列

  • 0%是动画的开始,100%是动画的完成,这样的规则就是动画序列
  • 在@keyframs中规定某项CSS样式,就能创建由当前样式逐渐改变为新样式的动画效果
  • 可以改变任意多的样式任意多次
  • 使用百分比或关键词 ”from“ 和 ”to“ 规定变化发生的时间

2.元素使用动画

	div{
		width:200px;
		height:200px;
		backagecolor:pink;
		margin: 100px auto;
		animation-name:动画名称;
		animation-duration:持续时间;
}

CSS3 2D、3D转换

3.动画简写属性

animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;

	animation:myfirst 5s linear 2s infinite alternate;
  • 简写属性里不包含 animation-play-state
  • 想要动画走回来,而不是直接跳回:animation-direction :alternate
  • 盒子动画结束后,停在结束位置 :animation-fill-mode :forwards

4.速度曲线细节

animation-timing-function

描述
linear 动画从头到尾的速度是相同的匀速
ease 默认,动画以低速开始,然后加快,在结束前变慢
ease-in 动画以低速开始
ease-out 动画以低速结束
ease-in-out 动画以低速开始和结束
steps() 指定了时间函数中的间隔数量(步长)

2.CSS3 3D转换translate3d

  • 3D位移:translate 3d(x,y,z)
  • 3D旋转:rotate 3d(x,y,z)
  • 透视:perspective
  • 3D呈现 transfrom-style

1.3D移动

  • translform:translateX(100px):仅仅是在x轴上移动
  • translform:translateY(100px):仅仅是在y轴上移动
  • translform:translateZ(100px):仅仅是在z轴上移动
  • translform:translate 3d(x,y,z)

2.透视perspective

CSS3 2D、3D转换

设置元素被查看位置的视图:

div
{
	perspective: 500;
	-webkit-perspective: 500; /* Safari 和 Chrome */
}

3.3D旋转 rotare3d

  • transform :rotateX(45deg):沿着x轴正方向旋转 45 度
  • transform :rotateY(45deg):沿着y轴正方向旋转 45 度
  • transform :rotateZ(45deg):沿着z轴正方向旋转 45 度
  • transform :rotate 3d(x,y,z,deg):沿着自定义轴旋转 deg 为角度

4.3D呈现 transfrom-style

  • 控制子元素是否开启三维立体环境
  • transfrom-style :flat子元素不开启3d立体空间 默认的
  • transfrom - style :preserve - 3d; 子元素开启立体空间
上一篇:Kubernetes实战(第二版)--第五章 在Pods中运行应用程序


下一篇:阿里云与Alluxio达成技术合作,携手提供离在线一体化数据分析服务