CSS3實(shí)現(xiàn)動(dòng)態(tài)打開(kāi)大門效果的方法？這個(gè)問(wèn)題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見(jiàn)到的。希望通過(guò)這個(gè)問(wèn)題能讓你收獲頗深。下面是小編給大家?guī)?lái)的參考內(nèi)容，讓我們一起來(lái)看看吧！

成都創(chuàng)新互聯(lián)公司專注于清江浦企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè),商城建設(shè)。清江浦網(wǎng)站建設(shè)公司,為清江浦等地區(qū)提供建站服務(wù)。全流程定制開(kāi)發(fā)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

先看看效果圖：

動(dòng)態(tài)打開(kāi)大門效果主要運(yùn)用到了3D旋轉(zhuǎn)和定位技術(shù)。具體步驟如下：

1、首先在頁(yè)面主體加三個(gè)很簡(jiǎn)單的div標(biāo)簽：

2、給外層盒子（.door） 加上基本的屬性、背景、視距以及相對(duì)定位（子盒子要用到絕對(duì)定位，所以父盒子最好 加上相對(duì)定位）。

.door {
            width: 450px;
            height: 450px;
            border: 1px solid #000000;
            margin: 100px auto;
            background: url(Images/men.png) no-repeat;
            background-size: 100% 100%;
            position: relative;
            perspective: 1000px;
        }

3、給左右的門設(shè)置相關(guān)屬性，這里給出左盒子的 相關(guān)屬性。右盒子只需將定位改為右邊距離為0，以及將旋轉(zhuǎn)軸改為右側(cè)即可。

.door-l {
            width: 50%;
            height: 100%;
            background-color: brown;
            position: absolute;
            top: 0;
            transition: all 0.5s;
            left: 0;
            border-right: 1px solid #000000;
            transform-origin: left;
        }

4、添加門上的 小圓環(huán)，在這里是使用偽類 before 進(jìn)行添加的。

（1）、設(shè)置大小與邊框

（2）、設(shè)置border-radius 為50% 讓其變成圓形。

（3）、設(shè)置定位 垂直居中并靠里面有一定距離。

.door-l::before {
            content: "";
            border: 1px solid #000000;
            width: 20px;
            height: 20px;
            position: absolute;
            top: 50%;
            border-radius: 50%;
            transform: translateY(-50%);
            right: 5px;
        }

5、最后設(shè)置旋轉(zhuǎn)度數(shù)，我這里是設(shè)置了120度（注意度數(shù)的正負(fù)代表旋轉(zhuǎn)方向）

.door:hover .door-l {
            transform: rotateY(-120deg);
        }

下面給出完整代碼，給大家參考一下。

感謝各位的閱讀！看完上述內(nèi)容，你們對(duì)CSS3實(shí)現(xiàn)動(dòng)態(tài)打開(kāi)大門效果的方法大概了解了嗎？希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道。

網(wǎng)站標(biāo)題：CSS3實(shí)現(xiàn)動(dòng)態(tài)打開(kāi)大門效果的方法-創(chuàng)新互聯(lián)
URL鏈接：http://weahome.cn/article/dhegjs.html