CSS 2D3D*

2D变形(CSS) transform

transform是css中具有颠覆性的特征之一 可以实现元素额位移 旋转 倾斜 缩放 甚至支持矩阵方式 配合过度和即将学习的动画知识 可以取代大量之前只能靠Flash才可以实现的效果

变形转换 transform transform 变换 变形的意思 <变形金刚 transformers >

移动 translate(x,y) translate 移动平移的意思

translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。前面X轴，后面Y轴

使用translate方法来将文字或图片在水平方向和垂直方向上分别垂直移动50像素

可以改变元素的位置 x , y 可为负值

translate(x,y)水平方向和垂直方向同时移动 (也就是X轴和Y轴同时移动)
translateX(x)仅水平方向移动(X轴移动)
translateY(y)仅垂直方向移动(y轴移动)

.box {
	width: 499.9999999px;
	height : 400px;
	background: pink;
	position:absolute;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%) /* 走的自己的一半 */
}

让盒子的水平居中

缩放scale(x,y)

transform: scale(0.8,1);

可以对元素进行水平和垂直方向的缩放.该语句使用scale方法使该元素在水平方向上缩小了20% 垂直方向上不缩放

scale(X,Y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放)
scaleX(X)使元素水平方向缩放(也就是X轴缩放)
scaleY(Y)使元素垂直方向缩放(也就是Y轴缩放)

scale()的取值默认的值为1 当值设置为0.01~0.99之间的任意值,作用使一个元素缩小 而任何大于或等于1.01的值,作用是让元素放大

旋转 rotate(deg)

可以对元素进行旋转, 正值为顺时针 负值为逆时针

transform:rotate(45deg)

注意单位是 deg 度数

transform-origin 可以调整元素转换的原点

div{transform-origin: left top; transform: rotate(45deg);}/* 改变元素原点到左上角 然后进行顺时针旋转45度 */

如果是4个角 可以使用 left top 这些 如果想要精确的位置 可以使用 PX 像素

div{transform-origin: 10px 10px;transform: rotate(45deg);}/* 改变元素原点到x为10 y为10 然后进行顺时针旋转45度*/

案例 旋转的盒子

body {
	background-color: skyblue;
	.container {
		width: 100px;
		height: 150px;
		border: 1px solid gray;
		margin: 300px auto;
		position:relative;
	}
}

课上案例 做一个旋转的图片 给6张图 然后 改变旋转点 需要过渡效果

倾斜 skew (deg,deg)

transform: skew(30deg,0deg)

改实例通过skew方法把元素水平方向上倾斜30度 处置方向保持不变

可以是元素按照一定的角度进行倾斜 可为负值 第二个参数不写默认为0

3D变形(CSS3) transform

左手坐标系

伸出左手 让拇指和食指成"L"型 大拇指向右 食指向上 中指指向前方 这样我们就建立了一个左手坐标系 拇指 食指 中指 分别代表X Y Z 轴的正方向 如下图

CSS3中的3D坐标系 与上述的3D坐标系是有一定区别的 相当于其围绕着X轴旋转了180度 如下图

简单记住他们的坐标:

X 左边是负的 右边是正的

Y 上面是负的 下面是正的

Z 里面是负的 外面是正的

rotateX()

就是沿着X轴 立体旋转

img {
	transition: all 0.5s ease 0s;
}
img:hover {
	transform: rotateX(180deg);
}

rotateY()

沿着Y轴进行旋转

透视(perspective)

电脑显示屏是一个2D平面 图像之所以具有立体感(3D效果),其实只是一种视觉呈现 通过透视可以实现此目的

透视可以将一个2D平面 在转换的过程中 呈现3D效果

透视原理 : 近大远小

浏览器透视 : 把近大远小的所有图像 透视在屏幕上

perspective : 视距, 表示视点距离屏幕的长短. 视点, 用于模拟透视效果时人眼的位置

注: 并非任何情况下都需要透视效果 根据开发需要进行设置

perspective 一般作为一个属性 设置给父元素 作用于所有的3D转换的子元素

理解透视距离原理 :

translateX(x)

仅水平方向移动 ** (X轴移动)

​

translateZ(z)

transformZ的直观表现形式就是大小变化 实质是XY平面相对于视点的远近变化(说远近就一定会说到离什么参照物远或近 在这里参照物就是perspective属性),比如 设置了 perspective为200px 那么 transformZ的值越接近200 就是离的越近 看上去也就越大 超过200 就看不到了 因为相当于跑到后面去了 我相信 正常情况下 是看不到自己的后脑勺的

translate3d(x,y,z)

[注意]其中 x和y可以是长度值 也可以是百分比 百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和 z只能设置长度值

开门案例:

两面翻转的盒子:

重点代码在这几行中:

注意 : 谁做动画 给谁过渡 backface-visibility: hidden /* 不是正面对向屏幕 就隐藏*/

动画(CSS3) animation

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

语法格式:

animation: 动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;

CSS动画属性

下面表格列出了@keyframes规则和所有动画属性

infinite 无限循环

关于几个值 除了名字 动画时间 延时有严格顺序要求 其他随意

多组动画

伸缩布局(CSS3)

CSS3在布局方面做了非常大的改进 是的我们对块级元素的布局排列变得十分灵活 适应性非常强 其强大的伸缩性 在响应式开发中可以发挥极大的作用

主轴 : Flex 容器的主轴主要用来配置 Flex 项目 默认是水平方向

侧轴 : 与主轴垂直的轴 称为侧轴 默认是垂直方向

方向 : 默认主轴从左到右 侧轴默认从上到下

主轴和侧轴并不是固定不变的 通过flex-direction可以互换

Flex布局的语法规范经过几年发生了很大的变化 也给Flexbox的使用带来了一定的局限性 因为语法规范版本众多 浏览器支持不一样 只是Flexbox布局使用不多

各属性详解****

1. flex子项目在主轴的缩放比例 不指定flex属性 则不参与伸缩分配

   min-width 最小值 min-width: 280px ; 最小宽度 不能小于280px

   max-width 最大值 max-width: 1280px ; 最大宽度 不能大于1280px

2. flex-direction 调整主轴方向 (默认为水平