前端之transform

最新推荐文章于 2024-08-16 14:42:56 发布

冥极醉醉冥极

最新推荐文章于 2024-08-16 14:42:56 发布

阅读量242

点赞数

分类专栏：前端学习文章标签： html5 css

本文链接：https://blog.csdn.net/qq_19831379/article/details/119202953

版权

前端学习专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			.box {
				float: left;
				position: relative;
				width: 1200px;
				height: 675px;
				margin: 100px 200px;
				overflow: hidden;
			}
			
			.box img {
				width: 1200px;
				height: 675px;
			}
			
			.box * {
				transition: 1s;
				position: absolute;
				left: 0px;
				top: 0px;
			}
			
			.box h2 {
				color: white;
				width: 200px;
				transform: translateX(10px) translateY(250px);
			}
			
			.box p {
				color: white;
			}
			
			.box p:nth-of-type(1) {
				transform: translateY(140px) translateX(-150px);
			}
			
			.box p:nth-of-type(2) {
				/* transform: translateX/translateY/translateZ */
				/* 跟position:relative一样，元素相对于自己改变位置，不脱离文档流 */
				/* translate位移时，默认原点时元素的中心位置 */
				transform: translateY(180px) translateX(-110px);
				transition: 1s 0.1s;
			}
			
			.box p:nth-of-type(3) {
				transform: translateY(220px) translateX(-100px);
				transition: 1s 0.2s;
			}
			
			.box:hover p:nth-of-type(1) {
				transform: translateY(140px) translateX(10px);
			}
			
			.box:hover p:nth-of-type(2) {
				transform: translateY(180px) translateX(10px);
			}
			
			.box:hover p:nth-of-type(3) {
				transform: translateY(220px) translateX(10px);
			}
			
			.box:hover img {
				/* 原点缩放1.3倍 */
				/* transform: scale(1.3); */
				/* 默认中心的原点为50% 50%， 左上角为0 0 */
				/* transform-origin: 0 0; */
				/* 旋转 rotateX/rotateY/rotateZ */
				/* 观察距离，给父元素写就是总体观察 */
				transform: perspective(1000px) rotateX(30deg);
			}
		</style>
	</head>
	<body>
		<div class="box">
			<img src="../03图片/img/1.jpg" />
			<h2>Taylor Swift</h2>
			<p class="p1">Birthday:1989.12.13</p>
			<p class="p2">Height:180cm</p>
			<p class="p3">Weight:56kg</p>
		</div>
	</body>
</html>

冥极醉醉冥极

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端之transform

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; } .box { float: left; position: relative; width: 1200px; heigh.
复制链接

扫一扫

专栏目录