目录
justify-content:(水平)对齐弹性容器的项目,当项目不占用主轴上所有可用空间时
transform-style:规定如何在 3D 空间中呈现被嵌套的元素
perspective:定义 3D 元素距视图的距离,以像素计
效果
原理
当鼠标移动至有效区域内,所有图片向右转向,鼠标悬停的图片不进行翻转,此图片后的所有图片,向左转向。
层叠样式属性
position:指定元素在文档中的定位方式
取值 | 属性 |
---|---|
static | 默认值,没有定位。 |
absolute | 绝对定位。 |
relative | 相对于正常位置,进行定位。 |
fixed | 绝对定位,相对于浏览器窗口。 |
inherit | 从父元素继承position的值。 |
display:元素生成框的类型
值 | 描述 |
---|---|
none | 此元素不会被显示。 |
block | 此元素将显示为块级元素,此元素前后会带有换行符。 |
inline | 默认。此元素会被显示为内联元素,元素前后没有换行符。 |
inline-block | 行内块元素。 |
list-item | 此元素会作为列表显示。 |
run-in | 此元素会根据上下文作为块级元素或内联元素显示。 |
float:元素的浮动方向
值 | 描述 |
---|---|
left | 元素向左浮动。 |
right | 元素向右浮动。 |
none | 默认值。元素不浮动,并会显示在其在文本中出现的位置。 |
inherit | 规定应该从父元素继承 float 属性的值。 |
justify-content:(水平)对齐弹性容器的项目,当项目不占用主轴上所有可用空间时
ps.使用 align-items 属性垂直对齐项目
值 | 描述 |
---|---|
flex-start | 默认值。项目位于容器的开头。 |
flex-end | 项目位于容器的结尾。 |
center | 项目位于容器中央。 |
space-between | 项目在行与行之间留有间隔。 |
space-around | 项目在行之前、行之间和行之后留有空间。 |
initial | 将此属性设置为其默认值。 |
inherit | 从其父元素继承此属性。 |
align-items:为弹性容器内的项目指定默认对齐方式
值 | 描述 |
---|---|
stretch | 默认。项目被拉伸以适合容器。 |
center | 项目位于容器的中央。 |
flex-start | 项目位于容器的开头。 |
flex-end | 项目位于容器的末端。 |
baseline | 项目被定位到容器的基线。 |
transform-style:规定如何在 3D 空间中呈现被嵌套的元素
值 | 描述 |
---|---|
flat | 子元素将不保留其 3D 位置。 |
preserve-3d | 子元素将保留其 3D 位置。 |
transform :向元素应用 2D 或 3D 转换
该属性允许我们对元素进行旋转、缩放、移动或倾斜
函数 | 描述 |
---|---|
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换,使用 16 个值的 4x4 矩阵。 |
translate3d(x,y,z) | 定义 3D 转化。 |
translateX(x) | 定义 3D 转化,仅使用用于 X 轴的值。 |
translateY(y) | 定义 3D 转化,仅使用用于 Y 轴的值。 |
translateZ(z) | 定义 3D 转化,仅使用用于 Z 轴的值。 |
scale3d(x,y,z) | 定义 3D 缩放转换。 |
scaleX(x) | 定义 3D 缩放转换,通过给定一个 X 轴的值。 |
scaleY(y) | 定义 3D 缩放转换,通过给定一个 Y 轴的值。 |
scaleZ(z) | 定义 3D 缩放转换,通过给定一个 Z 轴的值。 |
rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
rotateX(angle) | 定义沿 X 轴的 3D 旋转。 |
rotateY(angle) | 定义沿 Y 轴的 3D 旋转。 |
rotateZ(angle) | 定义沿 Z 轴的 3D 旋转。 |
perspective(n) | 定义 3D 转换元素的透视视图。 |
函数 | 描述 |
---|---|
matrix(n,n,n,n,n,n) | 定义 2D 转换,使用六个值的矩阵。 |
translate(x,y) | 定义 2D 转换,沿着 X 和 Y 轴移动元素。 |
translateX(n) | 定义 2D 转换,沿着 X 轴移动元素。 |
translateY(n) | 定义 2D 转换,沿着 Y 轴移动元素。 |
scale(x,y) | 定义 2D 缩放转换,改变元素的宽度和高度。 |
scaleX(n) | 定义 2D 缩放转换,改变元素的宽度。 |
scaleY(n) | 定义 2D 缩放转换,改变元素的高度。 |
rotate(angle) | 定义 2D 旋转,在参数中规定角度。 |
skew(x-angle,y-angle) | 定义 2D 倾斜转换,沿着 X 和 Y 轴。 |
skewX(angle) | 定义 2D 倾斜转换,沿着 X 轴。 |
skewY(angle) | 定义 2D 倾斜转换,沿着 Y 轴。 |
transition-delay:过渡效果何时开始
值 | 描述 |
---|---|
time | 规定在过渡效果开始之前需要等待的时间,以秒或毫秒计。 |
perspective:定义 3D 元素距视图的距离,以像素计
元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身
值 | 描述 |
---|---|
number | 元素距离视图的距离,以像素计。 |
none | 默认值。与 0 相同。不设置透视。 |
CSS:hover选择器属性
元素:hover 聚焦后改变自己
元素:hover 元素 聚焦后改变子元素
元素:hover+ 元素 聚焦后改变指定相邻元素
元素:hover~ 元素 聚焦后改变后面的元素
*{
margin:0;
padding:0;
}
body{
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
}
.shell{
position:relative;
min-width:1000px;
display:flex;
justify-content:center;
transform-style:preserve-3d;
perspective:600px;
}
.shell .box{
position:relative;
height:350px;
transform:rotateY(0);
transition-delay:.1s;
margin-left: 40px;
}
.shell .box .img{
width:100%;
}
.shell:hover .box{
transform:rotateY(20deg);
}
.shell .box:hover{
transform:rotateY(0deg) scale(1.25);
box-shadow:0 15px 20px rgb(0,0,0,.2);
z-index:1;
}
.shell .box:hover~.box{
transform:rotateY(-20deg);
}