亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定

CSS3 9-10代碼疑問！

<!DOCTYPE html>

<html>

<head>

? ? <meta charset="UTF-8">

? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">

? ? <meta http-equiv="X-UA-Compatible" content="ie=edge">

? ? <title>Document</title>

? ? <style type = "text/css">

? ? @import url("http://www.w3cplus.com/demo/css3/base.css");

? ? @font-face{

? ? ? ? font-family: "myfont";

? ? ? ? src: url("http://www.w3cplus.com/demo/css3/base.css");

? ? }


? ? body{

? ? ? ? background-color: #ececec;

? ? }


? ? /* basic menu styles */

? ? .nav-menu{

? ? ? ? background: #74adaa;

? ? ? ? width: 962px;

? ? ? ? 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: "myfont";

? ? ? ? -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舞臺布景*/

? ? ? ? position: relative;


? ? ? ? perspective: 200px;

? ? ? ? -webkit-perspective: 200px;

? ? ? ? -moz-perspective: 200px;

? ? ? ? -ms-perspective: 200px;

? ? ? ? -o-perspective: 200px;


? ? ? ? /*設置3D舞臺布景過渡效果*/

? ? ? ? transition: all 0.7s linear;

? ? ? ? -webkit-transition: all 0.7s linear;

? ? ? ? -moz-transition: all 0.7s linear;

? ? ? ? -ms-transition: all 0.7s linear;

? ? ? ? -o-transition: all 0.7s linear;

? ? }


? ? .three-d:not(.active):hover{

? ? ? ? cursor: pointer;

? ? }

? ? /*給不是當前狀態的3D舞臺的懸浮和聚焦狀態設置變形效果*/

? ? .three-d:not(.active):hover .three-d-box,

? ? .three-d:not(.active):focus .three-d-box{

? ? ? ? transform: translateZ(-25px) rotateX(90deg);

? ? ? ? -webkit-transform: translateZ(-25px) rotateX(90deg);

? ? ? ? -moz-transform: translateZ(-25px) rotateX(90deg);

? ? ? ? -ms-transform: translateZ(-25px) rotateX(90deg);

? ? ? ? -o-transform: translateZ(-25px) rotateX(90deg);

? ? }


? ? .three-d-box{

? ? /*給3D舞臺中的“three-d-box”設置變形和過渡效果*/

? ? ? ? position: absolute;

? ? ? ? top: 0;

? ? ? ? left: 0;

? ? ? ? display: block;

? ? ? ? width: 100%;

? ? ? ? height: 100%;


? ? ? ? transform: translateZ(-25px);

? ? ? ? -webkit-transform: translateZ(-25px);

? ? ? ? -moz-transform: translateZ(-25px);

? ? ? ? -ms-transform: translateZ(-25px);

? ? ? ? -o-transform: translateZ(-25px);


? ? ? ? transition: all 0.3s ease-out;

? ? ? ? -webkit-transition: all 0.3s ease-out;

? ? ? ? -moz-transition: all 0.3s ease-out;

? ? ? ? -ms-transition: all 0.3s ease-out;

? ? ? ? -o-transition: all 0.3s ease-out;


? ? ? ? transform-style: preserve-3d;

? ? ? ? -webkit-transform-style: preserve-3d;

? ? ? ? -moz-transform-style: preserve-3d;

? ? ? ? -ms-transform-style: preserve-3d;

? ? ? ? -o-transform-style: preserve-3d;


? ? ? ? pointer-events: none;

? ? ? ? -webkit-pointer-events: none;

? ? ? ? -moz-pointer-events: none;

? ? ? ? -ms-pointer-events: none;

? ? ? ? -o-pointer-events: none;

? ? }


? ? /*給導航設置3D前、3D后的變形效果*/

? ? .front{

? ? ? ? transform: rotateX(0deg) translateZ(25px);

? ? ? ? -webkit-transform: rotateX(0deg) translateZ(25px);

? ? ? ? -moz-transform: rotateX(0deg) translateZ(25px);

? ? ? ? -ms-transform: rotateX(0deg) translateZ(25px);

? ? ? ? -o-transform: rotateX(0deg) translateZ(25px);

? ? }

? ? .back{

? ? ? ? transform: rotateX(-90deg) translateZ(25px);

? ? ? ? -webkit-transform: rotateX(-90deg) translateZ(25px);

? ? ? ? -moz-transform: rotateX(-90deg) translateZ(25px);

? ? ? ? -ms-transform: rotateX(-90deg) translateZ(25px);

? ? ? ? -o-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: ?#51938F;

? ? ? ? background-size: 5px 5px;/*如果值設置一個值，這個值是寬度，高度自適應*/

? ? ? ? background-image: -webkit-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;

? ? ? ? transition: all 0.3s ease-in;

? ? ? ? -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;

? ? ? ? transform-origin: 0px 0px;

? ? ? ? -webkit-transform-origin: 0px 0px;

? ? ? ? -moz-transform-origin: 0px 0px;

? ? ? ? -ms-transform-origin: 0px 0px;

? ? ? ? -o-transform-origin: 0px 0px;

? ? ? ? transform: rotateX(-90deg);

? ? ? ? -webkit-transform: rotateX(-90deg);

? ? ? ? -moz-transform: rotateX(-90deg);

? ? ? ? -ms-transform: rotateX(-90deg);

? ? ? ? -o-transform: rotateX(-90deg);

? ? ? ? backface-visibility: hidden;

? ? ? ? -webkit-backface-visibility: hidden;

? ? ? ? -moz-backface-visibility: hidden;

? ? ? ? -ms-backface-visibility: hidden;

? ? ? ? -o-backface-visibility: hidden;

? ? }

? ? .nav-menu li:hover ul{

? ? ? ? transform: rotateX(0deg);

? ? ? ? -webkit-transform: rotateX(0deg);

? ? ? ? -moz-transform: rotateX(0deg);

? ? ? ? -ms-transform: rotateX(0deg);

? ? ? ? -o-transform: rotateX(0deg);

? ? }

? ? </style>

</head>

<body>

? ? <div id="nav">

? ? ? ? <ul class="nav-menu clearfix unstyled">

? ? ? ? ? ? <li><a href="#" class="three-d active">

? ? ? ? ? ? ? ? Home

? ? ? ? ? ? ? ? <span><span>Home</span><span>Home</span></span>

? ? ? ? ? ? </a></li>

? ? ? ? ? ? <li><a href="#">

? ? ? ? ? ? ? ? Services

? ? ? ? ? ? ? ? <span><span>Services</span><span>Services</span></span>

? ? ? ? ? ? </a></li>

? ? ? ? ? ? <li><a href="#">

? ? ? ? ? ? ? ? Products

? ? ? ? ? ? ? ? <span><span>Products</span><span>Products</span></span>

? ? ? ? ? ? </a></li>

? ? ? ? ? ? <li><a href="#">

? ? ? ? ? ? ? ? ? ? About

? ? ? ? ? ? ? ? <span><span>About</span><span>About</span></span>

? ? ? ? ? ? </a></li>

? ? ? ? ? ? <li><a href="#">

? ? ? ? ? ? ? ? Contact

? ? ? ? ? ? ? ? <span><span>Contact</span><span>Contact</span></span>

? ? ? ? ? ? </a></li>

? ? ? ? ? ? <li><a href="#">

? ? ? ? ? ? ? ? Blog

? ? ? ? ? ? ? ? <span><span>Blog</span><span>Blog</span></span></a>

? ? ? ? ? ? ? ? <ul class="clearfix unstyled drop-menu">

? ? ? ? ? ? ? ? ? ? <li><a href="#">

? ? ? ? ? ? ? ? ? ? ? ? ? ? Html5

? ? ? ? ? ? ? ? ? ? ? ? ? ? <span><span>Html5</span><span>Html5</span></span>

? ? ? ? ? ? ? ? ? ? </a></li>

? ? ? ? ? ? ? ? ? ? <li><a href="#">

? ? ? ? ? ? ? ? ? ? ? ? Css3

? ? ? ? ? ? ? ? ? ? ? ? <span><span>Css3</span><span>Css3</span></span>

? ? ? ? ? ? ? ? ? ? </a></li>

? ? ? ? ? ? ? ? ? ? <li><a href="#">

? ? ? ? ? ? ? ? ? ? ? ? JavaScript

? ? ? ? ? ? ? ? ? ? ? ? <span><span>JavaScript</span><span>JavaScript</span></span>

? ? ? ? ? ? ? ? ? ? </a></li>

? ? ? ? ? ? ? ? ? ? <li><a href="#">

? ? ? ? ? ? ? ? ? ? ? ? Videogames

? ? ? ? ? ? ? ? ? ? ? ? <span><span>Videogames</span><span>Videogames</span></span>

? ? ? ? ? ? ? ? ? ? </a></li>

? ? ? ? ? ? ? ? </ul>

? ? ? ? ? ? </li>

? ? ? ? ? ? <li><a href="#">

? ? ? ? ? ? ? ? Shop On-line

? ? ? ? ? ? ? ? <span><span>Shop On-line</span><span>Shop On-line</span></span>

? ? ? ? ? ? </a></li>

? ? ? ? </ul>

? ? </div>

</body>

</html>

提問： three-d-box 沿著Z軸向里移動25px, front,back沿著Z軸向外移動25px, ?“25px”的這個值是怎么計算出來的！

正在回答

1 回答

不知道我這么理解對不對，因為font-size: 20px, line-height: 20px , 而上下內邊距 為 15px,從水平中線算起，即字高的一半 10px+內邊距15px=25px，這樣 沿X軸水平旋轉的時候正好能遮擋?。?

新手自學 希望能給些詳細的講解！

0 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消
十天精通CSS3
  • 參與學習       243058    人
  • 解答問題       2677    個

本課程為CSS3入門教程，深刻詳解CSS3知識讓網頁穿上絢麗裝備

進入課程

CSS3 9-10代碼疑問！

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號