HTML+CSS实现图片悬停/方向转换

目录

效果

原理

层叠样式属性

position:指定元素在文档中的定位方式

display：元素生成框的类型

float：元素的浮动方向

justify-content：（水平）对齐弹性容器的项目，当项目不占用主轴上所有可用空间时

transform-style：规定如何在 3D 空间中呈现被嵌套的元素

transform ：向元素应用 2D 或 3D 转换

transition-delay：过渡效果何时开始

perspective：定义 3D 元素距视图的距离，以像素计

CSS：hover选择器属性 

---

效果

原理

        当鼠标移动至有效区域内，所有图片向右转向，鼠标悬停的图片不进行翻转，此图片后的所有图片，向左转向。

层叠样式属性

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);
	}