Rotation effect

最新推荐文章于 2022-09-25 18:36:41 发布

judy_hope123

最新推荐文章于 2022-09-25 18:36:41 发布

阅读量276

点赞数

本文链接：https://blog.csdn.net/judy_hope123/article/details/78158792

版权

不知道怎么描述才能让大家理解，效果就是一个图片，鼠标经过图片唤醒介绍信息的旋转出现（其实一直都在得），与此同时原图片旋转隐藏（不是真的消失）。啊~怎么给大家录制视频啊~~

值得一提的就是：搞清楚3D旋转的实质。你从哪个角度看过去，想要什么效果

没有图片。。。大家自己搞几张图片自己尝试吧，视频超过了2M ，上传不了。

<!--文档类型声明 ：HTML-->
<!DOCTYPE html>
<!--页面内容-->
<html>
	<!--头部：给搜索引擎、浏览器看-->

	<head>
		<!--元信息：描述页面信息||网页的字符集：网页用的文字||万国码（GB国标/GBK国标扩）-->
		<meta charset="utf-8">
		<meta name="keywords" content="CSS3,3D">
		<!--网页宣传单-->
		<meta name="description" content="这是猴纸大人的第一个3D旋转效果">
		<!--页面名称-->
		<title>CSS3旋转3D卡</title>
		<!--样式:描述元素(长、宽、高)-->
		<style>
			* {
				margin: 0px;
			}
			/*点选中以class命名的元素:名字*/
			
			.moviemessage {
				/*弹性盒子*/
				display: flex;
				/*属性名称:属性值;*/
				width: 940px;
				height: 300px; 
				/*外边距:上右下左*/
				margin: 20px auto;
			}
			
			.messagelist {
				position: relative;
				perspective: 1000px;
				width: 300px;
				height: 300px;
				margin-right: 20px;
			}
			
			.listpic {
				width: 300px;
				height: 300px;
				background: pink;
				transform: rotateY(0deg);
				transition: transform 0.5s;
			}
			.messagelist:hover .listpic{
				transform: rotateY(-90deg);
			}
			.listtext {
				/*定位,不属于文档流*/
				position: absolute;
				left: 0px;
				top: 0px;
				width: 300px;
				height: 300px;
				/*rgba红 绿 蓝 透明度*/
				background: rgba(0, 0, 0, 0.5);
				transform: rotateY(90deg);
				transition: transform 0.5s;
			}
			
			.messagelist:hover .listtext {
				transform: rotateY(0deg);
			}
			
			.listtext p {
				color: white;
				text-align: center;
				/*background: black;*/
				padding-top: 90px;
			}
		</style>
	</head>

	<!--身体:页面的主要内容,给用户看的-->

	<body>
		<!--盒子||起名：字英文，顾名思义-->
		<div class="moviemessage">
			<div class="messagelist">
				<div class="listpic"><img src="img/1.jpg" /></div>
				
				<div class="listtext">
					<p>仙女级。唱歌好听，情商尚高。心中波涛汹涌，脸上波澜不惊，颇有些泰山崩于前而色不变的大者风范</p>
				</div>
				
				
			</div>
			
			<div class="messagelist">
				<div class="listpic"><img src="img/2.jpg" /></div>
				
				<div class="listtext">
					<p>万能女。温暖不失思想，能干不失细腻。总是说你没有目标，没有方向，其实，我知道的 你内心的小宇宙一直等着机会惊羡我们的双眼</p>
				</div>
				
				
			</div>
			
			
			<div class="messagelist">
				<div class="listpic"><img src="img/3.jpg" /></div>
				
				<div class="listtext">
					<p>女王级。会玩会学，有自己独特的坐标系。有仙气，接地气，在吃喝玩乐学的道路上静候着King</p>
				</div>
				
				
			</div>
			
		</div>
	</body>

</html>

judy_hope123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Rotation effect

不知道怎么描述才能让大家理解，效果就是一个图片，鼠标经过图片唤醒介绍信息的旋转出现（其实一直都在得），与此同时原图片旋转隐藏（不是真的消失）。啊~怎么给大家录制视频啊~~值得一提的就是：搞清楚3D旋转的实质。你从哪个角度看过去，想要什么效果这次没有图片，我 CSS3旋转3D卡 * { margin:
复制链接

扫一扫