ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

制作3D旋转导航综合练习题 - 慕课

2021-10-03 17:30:09  阅读：171  来源： 互联网

标签：练习题 慕课 transform 25% 75% 25px 478480 transparent 3D


慕课CSS3动画综合练习

主要收获：perspective使元素具有透视效果，本质是建立了三维空间场景，从2D转到了3D，同时基于透视效果使得元素在进行xyz轴立体变换时附带透视效果（否则不具有透视效果）

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>制作3D旋转导航</title>
		<style>
			@import url("http://www.w3cplus.com/demo/css3/base.css");

			@font-face {
				font-family: hywh;
				src: url(https://raw.githubusercontent.com/Kuyoru730/kuyoru.com/main/HYWenHei-85W.ttf);
			}

			body {
				background-color: #edecec;
			}

			/* basic menu styles */
			.nav-menu {
				display: block;
				background: #74adaa;
				width: 950px;
				margin: 50px auto 150px;
			}

			.nav-menu>li {
				display: inline;
				float: left;
				border-right: 1px solid #94c0be;
			}

			.nav-menu>li:last-child {
				border-right: none;
			}

			.nav-menu li a {
				color: #fff;
				display: block;
				text-decoration: none;
				/*调用本地字体*/
				font-family: "hywh";
				-webkit-font-smoothing: antialiased;
				-moz-font-smoothing: antialiased;
				font-smoothing: antialiased;
				text-transform: capitalize;
				overflow: visible;
				line-height: 20px;
				font-size: 20px;
				padding: 15px 30px 15px 31px;
			}


			.three-d {
				/* 任务三、设置3D舞台布景 perspective:使元素具有透视效果，但并不是让元素变成立体，仅仅是布景*/
				-webkit-perspective: 200px;
				-ms-perspective: 200px;
				-moz-perspective: 200px;
				perspective: 200px;

				/*任务四、设置3D舞台布景过渡效果*/
				transition: all 0.7s linear;
				-ms-transition: all 0.7s linear;
				-moz-transition: all 0.7s linear;
				-webkit-transition: all 0.7s linear;
				position: relative;
			}

			.three-d:not(.active):hover {
				cursor: pointer;
			}

			/*任务五、给不是当前状态的3D舞台的悬浮与聚焦状态设置变形效果*/
			.three-d:not(.active):hover .three-d-box,
			.three-d:not(.active):focus .three-d-box {
				-ms-transform: translateZ(-25px) rotateX(90deg);
				-moz-transform: translateZ(-25px) rotateX(90deg);
				-webkit-transform: translateZ(-25px) rotateX(90deg);
				transform: translateZ(-25px) rotateX(90deg);
			}

			.three-d-box {
				/*任务六、给3D舞台中“.three-d-box”设置过渡与变形效果*/

				-webkit-transition: all .3s ease-out;
				-moz-transition: all .3s ease-out;
				-ms-transition: all .3s ease-out;
				-o-transition: all .3s ease-out;
				transition: all .3s ease-out;
				-webkit-transform: translatez(-25px);
				-moz-transform: translatez(-25px);
				-ms-transform: translatez(-25px);
				-o-transform: translatez(-25px);
				transform: translatez(-25px);

				-webkit-transform-style: preserve-3d;
				-moz-transform-style: preserve-3d;
				-ms-transform-style: preserve-3d;
				-o-transform-style: preserve-3d;
				transform-style: preserve-3d;
				-webkit-pointer-events: none;
				-moz-pointer-events: none;
				-ms-pointer-events: none;
				-o-pointer-events: none;
				pointer-events: none;
				position: absolute;
				top: 0;
				left: 0;
				display: block;
				width: 100%;
				height: 100%;
			}

			/*任务七、给导航设置3D前，与3D后变形效果*/
			.front {
				-webkit-transform: rotatex(0deg) translatez(25px);
				-moz-transform: rotatex(0deg) translatez(25px);
				-ms-transform: rotatex(0deg) translatez(25px);
				-o-transform: rotatex(0deg) translatez(25px);
				transform: rotatex(0deg) translatez(25px);
			}

			.back {
				-webkit-transform: rotatex(-90deg) translatez(25px);
				-moz-transform: rotatex(-90deg) translatez(25px);
				-ms-transform: rotatex(-90deg) translatez(25px);
				-o-transform: rotatex(-90deg) translatez(25px);
				transform: rotatex(-90deg) translatez(25px);
				color: #FFE7C4;
			}

			.front,
			.back {
				display: block;
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				background: #74adaa;
				padding: 15px 30px 15px 31px;
				color: white;
				-webkit-pointer-events: none;
				-moz-pointer-events: none;
				-ms-pointer-events: none;
				-o-pointer-events: none;
				pointer-events: none;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
			}

			/*任务八、设置导航当前状态与悬浮状态下的背景效果*/
			.nav-menu li .active .front,
			.nav-menu li .active .back,
			.nav-menu li a:hover .front,
			.nav-menu li a:hover .back {

				background-color: #51938f;
				-webkit-background-size: 5px 5px;
				background-size: 5px 5px;
				background-position: 0 0, 30px 30px;
				background-image: -webit-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
				background-image: -moz-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
				background-image: -ms-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
				background-image: -o-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
				background-image: linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);


			}

			.nav-menu ul {
				position: absolute;
				text-align: left;
				line-height: 40px;
				font-size: 14px;
				width: 200px;
				-webkit-transition: all 0.3s ease-in;
				-moz-transition: all 0.3s ease-in;
				-ms-transition: all 0.3s ease-in;
				-o-transition: all 0.3s ease-in;
				transition: all 0.3s ease-in;
				-webkit-transform-origin: 0px 0px;
				-moz-transform-origin: 0px 0px;
				-ms-transform-origin: 0px 0px;
				-o-transform-origin: 0px 0px;
				transform-origin: 0px 0px;
				-webkit-transform: rotateX(-90deg);
				-moz-transform: rotateX(-90deg);
				-ms-transform: rotateX(-90deg);
				-o-transform: rotateX(-90deg);
				transform: rotateX(-90deg);
				-webkit-backface-visibility: hidden;
				-moz-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				-o-backface-visibility: hidden;
				backface-visibility: hidden;
			}

			/*任务九、显示下拉导航菜单，并其设置一个变形效果*/
			.nav-menu>li:hover ul {
				display: block;
				-webkit-transform: rotateX(0deg);
				-moz-transform: rotateX(0deg);
				-o-transform: rotateX(0deg);
				transform: rotateX(0deg);
			}
		</style>
	</head>
	<body>
		<div id="nav">
			<ul class="nav-menu clearfix unstyled">
				<li><a href="#" class="three-d active">
						Home
						<span class="three-d-box"><span class="front">Home</span><span class="back">Home</span></span>
					</a></li>
				<li><a href="#" class="three-d">
						Services
						<span class="three-d-box"><span class="front">Services</span><span
								class="back">Services</span></span>
					</a></li>
				<li><a href="#" class="three-d">
						Products
						<span class="three-d-box"><span class="front">Products</span><span
								class="back">Products</span></span>
					</a></li>
				<li><a href="#" class="three-d">
						About
						<span class="three-d-box"><span class="front">About</span><span class="back">About</span></span>
					</a></li>
				<li><a href="#" class="three-d">
						Contact
						<span class="three-d-box"><span class="front">Contact</span><span
								class="back">Contact</span></span>
					</a></li>
				<li><a href="#" class="three-d">
						Blog
						<span class="three-d-box"><span class="front">Blog</span><span
								class="back">Blog</span></span></a>
					<ul class="clearfix unstyled drop-menu">
						<li><a href="#" class="three-d">
								Html5
								<span class="three-d-box"><span class="front">Html5</span><span
										class="back">Html5</span></span>
							</a></li>
						<li><a href="#" class="three-d">
								Css3
								<span class="three-d-box"><span class="front">Css3</span><span
										class="back">Css3</span></span>
							</a></li>
						<li><a href="#" class="three-d">
								JavaScript
								<span class="three-d-box"><span class="front">JavaScript</span><span
										class="back">JavaScript</span></span>
							</a></li>
						<li><a href="#" class="three-d">
								Videogames
								<span class="three-d-box"><span class="front">Videogames</span><span
										class="back">Videogames</span></span>
							</a></li>
					</ul>
				</li>
				<li><a href="#" class="three-d">
						Shop On-line
						<span class="three-d-box"><span class="front">Shop On-line</span><span class="back">Shop
								On-line</span></span>
					</a></li>
			</ul>
		</div>
	</body>
</html>

标签：练习题,慕课,transform,25%,75%,25px,478480,transparent,3D
来源： https://blog.csdn.net/weixin_44587107/article/details/120596413

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有