web前端复习第十课

最新推荐文章于 2024-10-02 05:39:15 发布

思丰百年

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量135

点赞数

分类专栏： web前端开发复习，从头再来文章标签： javascript css html html5

本文链接：https://blog.csdn.net/qq_39664934/article/details/107370651

版权

web前端开发复习，从头再来专栏收录该内容

22 篇文章 0 订阅

订阅专栏

3D属性平移

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			width: 500px;
			height: 400px;
			border: 1px solid #000;
			margin: 100px auto;
			transform-style: preserve-3d;
			/*视图距离*/
			perspective: 100px;
		}
		.box1{
			width: 200px;
			height: 200px;
			background-color: red;
			margin: 100px auto;
			/*Z轴平移*/
			transform: translateZ(100px);

		}
	</style>
</head>
<body>
	<div class="box">
		<div class="box1"></div>
	</div>
</body>
</html>

3D属性旋转

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			width: 500px;
			height: 400px;
			border: 1px solid #000;
			margin: 100px auto;
			/*视图距离*/
			perspective: 40px;
		}
		.box1{
			width: 200px;
			height: 200px;
			background-color: red;
			margin: 100px auto;
			/*Z轴旋转*/
			transform: rotateZ(45deg);
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="box1"></div>
	</div>
</body>
</html>

3D属性效果和视图

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			width: 500px;
			height: 400px;
			border: 1px solid #000;
			margin: 100px auto;
			
			/*让其子元素保留3D位置*/
			transform-style: preserve-3d;
			/*视图距离*/
			perspective: 40px;
		}
		.box1{
			width: 200px;
			height: 200px;
			background-color: red;
			margin: 100px auto;
			/*Z轴旋转*/
			transform: rotateZ(45deg);
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="box1"></div>
	</div>
</body>
</html>

改变透视点的位置

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			width: 500px;
			height: 400px;
			border: 1px solid #000;
			margin: 100px auto;

			/*让其子元素保留3D位置*/
			transform-style: preserve-3d;
			/*视图距离*/
			perspective: 40px;
			perspective-origin:top right;
		}
		.box1{
			width: 200px;
			height: 200px;
			background-color: red;
			/*Z轴旋转*/
			transform: rotateX(10deg);

		}
	</style>
</head>
<body>
	<div class="box">
		<div class="box1"></div>
	</div>
</body>
</html>

元素背面不可见

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		
		.box1{
			width: 200px;
			height: 200px;
			background-color: red;
			/*Z轴旋转*/
			transform: rotateX(10deg);
			/*当元素旋转到背面的时候不可见*/
			backface-visibility: hidden;
		}
	</style>
</head>
<body>
	
	<div class="box1"></div>

</body>
</html>

3D案例图片自行加上

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="3D案例.css">
</head>
<body>
	<ul>
		<li><img src="img/1.jpg"></li>
		<li><img src="img/2.jpg"></li>
		<li><img src="img/3.jpg"></li>
		<li><img src="img/4.jpg"></li>
		<li><img src="img/5.jpg"></li>
		<li><img src="img/6.jpg"></li>
		<li><img src="img/7.jpg"></li>
		<li><img src="img/8.jpg"></li>
		<li><img src="img/9.jpg"></li>
		<li><img src="img/10.jpg"></li>
		<li><img src="img/11.jpg"></li>
		<li><img src="img/12.jpg"></li>
	</ul>
</body>
</html>

附css

body{
	margin: 0;
	background: url(img/timg6.jpg);
	background-size: 100%;
}
ul{
	list-style: none;
	padding: 0;
	width: 200px;
	height: 200px;
	position: relative;
	margin: 200px auto;
	/*让子元素拥有3D属性*/
	transform-style: preserve-3d;
	transform: rotateX(15deg);
	animation-name: mv;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
ul li{
	width: 200px;
	height: 200px;
	position: absolute;
	/*透明度  直接让盒子透明包括字体，rgba只透明背景，不透明文字*/
	/*opacity: 0.5;*/
}
ul li img{
	width: 100%;
	height: 100%;
}
ul li:nth-child(1){
	transform: translateZ(100px);
	background-color: rgba(0,255,0,0.5);
}
ul li:nth-child(2){
	transform: translateZ(-100px);
	background-color: rgba(255,0,0,0.5);
}
ul li:nth-child(3){
	transform: rotateX(90deg) translateZ(100px);
	background-color: rgba(0,0,255,0.5);
}
ul li:nth-child(4){
	transform: rotateX(90deg) translateZ(-100px);
	background-color: rgba(255,255,0,0.5);
}
ul li:nth-child(5){
	transform: rotateY(90deg) translateZ(100px);
	background-color: rgba(0,255,255,0.5);
}
ul li:nth-child(6){
	transform: rotateY(90deg) translateZ(-100px);
	background-color: rgba(255,0,255,0.5);
}
ul li:nth-child(7){
	transform: translateZ(100px);
	background-color: rgba(0,255,0,0.5);
}
ul li:nth-child(8){
	transform: translateZ(-100px);
	background-color: rgba(255,0,0,0.5);
}
ul li:nth-child(9){
	transform: rotateX(90deg) translateZ(100px);
	background-color: rgba(0,0,255,0.5);
}
ul li:nth-child(10){
	transform: rotateX(90deg) translateZ(-100px);
	background-color: rgba(255,255,0,0.5);
}
ul li:nth-child(11){
	transform: rotateY(90deg) translateZ(100px);
	background-color: rgba(0,255,255,0.5);
}
ul li:nth-child(12){
	transform: rotateY(90deg) translateZ(-100px);
	background-color: rgba(255,0,255,0.5);
}
ul:hover li:nth-child(7){
	transform: translateZ(250px);
	transition: 1s;
}
ul:hover li:nth-child(8){
	transform: translateZ(-250px);
	transition: 1s;
}
ul:hover li:nth-child(9){
	transform: rotateX(90deg) translateZ(250px);
	transition: 1s;
}
ul:hover li:nth-child(10){
	transform: rotateX(90deg) translateZ(-250px);
	transition: 1s;
}
ul:hover li:nth-child(11){
	transform: rotateY(90deg) translateZ(250px);
	transition: 1s;
}
ul:hover li:nth-child(12){
	transform: rotateY(90deg) translateZ(-250px);
	transition: 1s;
}
@keyframes mv{
	0%{
		transform: rotateX(15deg) rotateY(0deg);
	}
	100%{
		transform: rotateX(15deg) rotateY(360deg);
	}
}