第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定

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;

? ? ? ? /*調(diào)用服務(wù)器字體*/

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

? ? ? ? /*設(shè)置3D舞臺(tái)布景*/

? ? ? ? position: relative;


? ? ? ? perspective: 200px;

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

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

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

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


? ? ? ? /*設(shè)置3D舞臺(tái)布景過渡效果*/

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

? ? }

? ? /*給不是當(dāng)前狀態(tài)的3D舞臺(tái)的懸浮和聚焦?fàn)顟B(tài)設(shè)置變形效果*/

? ? .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舞臺(tái)中的“three-d-box”設(shè)置變形和過渡效果*/

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

? ? }


? ? /*給導(dǎo)航設(shè)置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;

? ? }


? ? /*設(shè)置導(dǎo)航當(dāng)前狀態(tài)和懸浮狀態(tài)下的背景效果*/

? ? .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;/*如果值設(shè)置一個(gè)值，這個(gè)值是寬度，高度自適應(yīng)*/

? ? ? ? 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軸向里移動(dòng)25px, front,back沿著Z軸向外移動(dòng)25px, ?“25px”的這個(gè)值是怎么計(jì)算出來的！

正在回答

1 回答

不知道我這么理解對(duì)不對(duì)，因?yàn)閒ont-size: 20px, line-height: 20px , 而上下內(nèi)邊距 為 15px,從水平中線算起，即字高的一半 10px+內(nèi)邊距15px=25px，這樣 沿X軸水平旋轉(zhuǎn)的時(shí)候正好能遮擋??！?

新手自學(xué) 希望能給些詳細(xì)的講解！

0 回復(fù) 有任何疑惑可以回復(fù)我~

舉報(bào)

0/150
提交
取消
十天精通CSS3
  • 參與學(xué)習(xí)       243036    人
  • 解答問題       2665    個(gè)

本課程為CSS3入門教程，深刻詳解CSS3知識(shí)讓網(wǎng)頁(yè)穿上絢麗裝備

進(jìn)入課程

CSS3 9-10代碼疑問！

我要回答 關(guān)注問題
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)