資訊專欄INFORMATION COLUMN
摘要：為其盒子設(shè)置樣式為其每個(gè)設(shè)置樣式為其設(shè)置動(dòng)畫源碼書頁(yè)思路有五個(gè)，分別放上五個(gè)字。
3D 首先讓我們來(lái)看一張效果圖 1.1.1 屬性
perspective ：透距離，單位像素（值越小，透視距離越近，效果越明顯）：設(shè)置父元素上
perspective-origin: 設(shè)置透視點(diǎn)的位置
transform-style :指定某元素的子元素是位于三維空間內(nèi)，取值：flat | preserve-3d
1.1.1思路 （1）有三個(gè)div，一起放到一個(gè)盒子里面。（2）為其盒子設(shè)置樣式
.cube{
width: 200px;
height: 300px;
transform-style: preserve-3d;
margin:100px auto;
position: relative;
transform: rotateX(30deg);
border-radius: 50%;
padding: 60px;
}
(3)為其每個(gè)div設(shè)置樣式
.mian{
width: 200px;
height: 300px;
background-image: url(1.jpg);
background-position:400px 0;
position: absolute;
background: url(aka.jpg);
border: 1px solid #ccc;
transition: 2s;
}
/* .mian1:hover{
transform-origin: right;
transform: rotateY(-60deg);
} */
.mian1{
transform-origin: right;
transform: translateX(-200px) rotateY(45deg);
background-position:0 0;
}
.mian2{
background-position: 400px 0;
}
.mian3{
transform-origin: left;
transform: translateX(200px) rotateY(45deg);
background-position: 200px 0;
}
（4）為其設(shè)置動(dòng)畫
.mian3:hover{
transform: translateX(200px) rotateY(0deg);
}
.mian1:hover{
transform: translateX(-200px) rotateY(0deg);
}
1.1.1源碼：
書頁(yè)
（2）給box和div總體設(shè)置樣式前端小學(xué)生
#box{
margin: 100px auto;
font-size: 100px;
color:#005aa0;
text-align: center;
}
.ze1,.ze2,.ze3,.ze4,.ze5{
display: inline-block;
width: 90px;
height: 100%;
position: relative;
}
（3）設(shè)置偽元素before和after
.ze1:before,.ze2:before,.ze3:before,.ze4:before,.ze5:before{
content:attr(data);
position: absolute;
color: #ffffff;
top:0;
left: 2px;
transform-origin: left;
transition: transform .5s;
}
.ze1:before{
content: "前";
}
.ze2:before{
content: "端";
}
.ze3:before{
content: "小";
}
.ze4:before{
content: "學(xué)";
}
.ze5:before{
content: "生";
}
.ze1:after,.ze2:after,.ze3:after,.ze4:after,.ze5:after {
position: absolute;
color: #b3b3b3;
top:3px;
left: 10px;
z-index: -1;
transform-origin: left;
transition: transform .5s;
}
.ze1:after{
content: "前";
}
.ze2:after{
content: "端";
}
.ze3:after{
content: "小";
}
.ze4:after{
content: "學(xué)";
}
.ze5:after{
content: "生";
}
（4）為其設(shè)置動(dòng)畫
.ze1:hover:before,.ze2:hover:before,.ze3:hover:before,.ze4:hover:before,.ze5:hover:before{
transform: rotateY(-40deg) skewY(10deg);
}
.ze1:hover:after,.ze2:hover:after,.ze3:hover:after,.ze4:hover:after,.ze5:hover:after{
transform: rotateY(40deg) skewY(10deg);
}
動(dòng)態(tài)字
前
端
小
學(xué)
生
3d動(dòng)畫
持續(xù)更新，歡迎大家指教
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/52862.html
摘要：我們來(lái)看下做一個(gè)動(dòng)畫需要哪些東西。說(shuō)明各個(gè)屬性的作用代表物體距離瀏覽器是。下面我們做一個(gè)向下翻頁(yè)的數(shù)字，和一個(gè)向做翻頁(yè)的數(shù)字。 我們來(lái)看下做一個(gè)css3 3D動(dòng)畫需要哪些東西。前面我們已經(jīng)使用transition和transform做了一些簡(jiǎn)單的操作。 設(shè)置3D場(chǎng)景 做3D動(dòng)畫，我們首先要設(shè)置3D場(chǎng)景。3D場(chǎng)景我們通常用perspective和perspective-origin兩個(gè)屬...
摘要：為其盒子設(shè)置樣式為其每個(gè)設(shè)置樣式為其設(shè)置動(dòng)畫源碼書頁(yè)思路有五個(gè)，分別放上五個(gè)字。 3D 首先讓我們來(lái)看一張效果圖 1.1.1 showImg(https://segmentfault.com/img/bVbfeDr?w=664&h=557); 屬性 perspective ：透距離，單位像素（值越小，透視距離越近，效果越明顯）：設(shè)置父元素上 perspective-origin: 設(shè)置...
摘要：更別提配合一些運(yùn)動(dòng)或者時(shí)間的庫(kù)來(lái)編程了。姿勢(shì)封裝了一大堆關(guān)鍵幀動(dòng)畫，開發(fā)者只需要關(guān)心添加或者移除相關(guān)的動(dòng)畫的便可以。 簡(jiǎn)介 在過(guò)去的兩年，越來(lái)越多的同事、朋友和其他不認(rèn)識(shí)的童鞋進(jìn)行移動(dòng)web開發(fā)的時(shí)候，都使用了transformjs，所有必要介紹一下，讓更多的人受益，提高編程效率，并享受編程樂(lè)趣。（當(dāng)然transformjs不僅僅支持移動(dòng)設(shè)備，支持CSS3 3D Transforms的...
摘要：更別提配合一些運(yùn)動(dòng)或者時(shí)間的庫(kù)來(lái)編程了。姿勢(shì)封裝了一大堆關(guān)鍵幀動(dòng)畫，開發(fā)者只需要關(guān)心添加或者移除相關(guān)的動(dòng)畫的便可以。 簡(jiǎn)介 在過(guò)去的兩年，越來(lái)越多的同事、朋友和其他不認(rèn)識(shí)的童鞋進(jìn)行移動(dòng)web開發(fā)的時(shí)候，都使用了transformjs，所有必要介紹一下，讓更多的人受益，提高編程效率，并享受編程樂(lè)趣。（當(dāng)然transformjs不僅僅支持移動(dòng)設(shè)備，支持CSS3 3D Transforms的...
閱讀 3415·2023-04-26 02:41
閱讀 2469·2023-04-26 00:14
閱讀 2884·2021-08-11 10:22
閱讀 1292·2019-12-27 11:38
閱讀 3582·2019-08-29 18:34
閱讀 2389·2019-08-29 12:13
閱讀 2962·2019-08-26 18:26
閱讀 1872·2019-08-26 16:49
