HTML5中的伪类选择器实现一张图片翻转特效

效果示意图

图中，我实现的效果是当鼠标悬停在图片上面时，图片将围绕下边界旋转90度

代码示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 300px;
				height: 350px;
				margin: 0 auto;
				/*设置盒子居中显示*/
				background-color: skyblue;
				padding-top: 150px;
				/*内边距 (div标签)*/
				/*border: 1px solid black;*/
				text-align: center;
				perspective: 350px;
			}
			div img{
				transition: all 3s;
				transform-origin: bottom;
			}
			div img:hover{
				transform:rotateX(90deg) ;
			}
		</style>
	</head>
	<body>
		<div>
			<img src="img/angel2.jpeg" width="250px" height="350px"/>
		</div>
	</body>
</html>

补充知识点:

1.伪类选择器相关:

hover 伪类选择器:

hover这个伪类选择器除了可以用在a标签上，还可以用在其他的任何标签上面
格式:div:hover{}
当鼠标悬停在标签上时所要执行的操作
过渡模块:
<style>中:
在<div>标签内添加:
transition-property ：告诉系统哪个属性需要重新过渡
属性:width,height,color,background-color....
格式:transition-property: 属性(width....);
transition-duration: 告诉系统该过渡的持续时间为多少
格式:transitino-duration: 5s;
transition-delay :鼠标悬停几秒后开始变化
格式:transition-delay:1s;

监听哪一个就在哪一个后面加:hover
<style>标签中添加 : div:hover{
属性:要改变的样子

}
<div>里面的简写格式:
transition:第一个过渡属性过渡时长运动速度延时时长 ,
第二个过渡属性过渡时长运动速度延时时长;
(也可以省略后面的两个参数,只要编写前面两个参数就满足过渡三要素)

所有属性均为一个过渡效果: transition : all 5s;

2.2D 模型转换:

2D 转换模块:
格式:
transform: rotateZ(45deg); //绕Z轴旋转45度
X Y..
transform: scale(1.5); //将其在原来的基础上面放大为1.5被

设置旋转中心:
div img{
transform-origin:center bottom;// 此处设置为围绕底部旋转
}
转换轴向:默认情况下都是围绕z轴进行旋转;
透视属性:
格式:
注意: 透视属性必须添加到当前需要呈现的元素的父元素上面:
在<style>
<ul>中添加 perspective: XXXpx;//数值越小效果越明显
li的父元素是ul 标签

产生近大远小的效果(立体感)

HTML5中的伪类选择器 实现一张图片翻转特效

猜你喜欢

HTML5中的伪类选择器实现一张图片翻转特效