資訊專欄INFORMATION COLUMN
摘要：為其盒子設(shè)置樣式為其每個設(shè)置樣式為其設(shè)置動畫源碼書頁思路有五個，分別放上五個字。
3D 首先讓我們來看一張效果圖 1.1.1 屬性
perspective ：透距離，單位像素（值越小，透視距離越近，效果越明顯）：設(shè)置父元素上
perspective-origin: 設(shè)置透視點的位置
transform-style :指定某元素的子元素是位于三維空間內(nèi)，取值：flat | preserve-3d
1.1.1思路 （1）有三個div，一起放到一個盒子里面。（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)為其每個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è)置動畫
.mian3:hover{
transform: translateX(200px) rotateY(0deg);
}
.mian1:hover{
transform: translateX(-200px) rotateY(0deg);
}
1.1.1源碼：
書頁
1.1.2
1.1.2思路：
（1）有五個div，分別放上五個字。
（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è)置動畫
.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);
}
1.1.2源碼：
動態(tài)字
前
端
小
學(xué)
生
1.1.3
1.1.3思路不寫，只寫源碼
1.1.3源碼：
3d動畫
持續(xù)更新，歡迎大家指教
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/113707.html
摘要：我們來看下做一個動畫需要哪些東西。說明各個屬性的作用代表物體距離瀏覽器是。下面我們做一個向下翻頁的數(shù)字，和一個向做翻頁的數(shù)字。 我們來看下做一個css3 3D動畫需要哪些東西。前面我們已經(jīng)使用transition和transform做了一些簡單的操作。 設(shè)置3D場景 做3D動畫，我們首先要設(shè)置3D場景。3D場景我們通常用perspective和perspective-origin兩個屬...
摘要：為其盒子設(shè)置樣式為其每個設(shè)置樣式為其設(shè)置動畫源碼書頁思路有五個，分別放上五個字。 3D 首先讓我們來看一張效果圖 1.1.1 showImg(https://segmentfault.com/img/bVbfeDr?w=664&h=557); 屬性 perspective ：透距離，單位像素（值越小，透視距離越近，效果越明顯）：設(shè)置父元素上 perspective-origin: 設(shè)置...
摘要：更別提配合一些運動或者時間的庫來編程了。姿勢封裝了一大堆關(guān)鍵幀動畫，開發(fā)者只需要關(guān)心添加或者移除相關(guān)的動畫的便可以。 簡介 在過去的兩年，越來越多的同事、朋友和其他不認(rèn)識的童鞋進(jìn)行移動web開發(fā)的時候，都使用了transformjs，所有必要介紹一下，讓更多的人受益，提高編程效率，并享受編程樂趣。（當(dāng)然transformjs不僅僅支持移動設(shè)備，支持CSS3 3D Transforms的...
摘要：更別提配合一些運動或者時間的庫來編程了。姿勢封裝了一大堆關(guān)鍵幀動畫，開發(fā)者只需要關(guān)心添加或者移除相關(guān)的動畫的便可以。 簡介 在過去的兩年，越來越多的同事、朋友和其他不認(rèn)識的童鞋進(jìn)行移動web開發(fā)的時候，都使用了transformjs，所有必要介紹一下，讓更多的人受益，提高編程效率，并享受編程樂趣。（當(dāng)然transformjs不僅僅支持移動設(shè)備，支持CSS3 3D Transforms的...
閱讀 1179·2021-09-27 13:34
閱讀 985·2021-09-13 10:25
閱讀 513·2019-08-30 15:52
閱讀 3452·2019-08-30 13:48
閱讀 653·2019-08-30 11:07
閱讀 2173·2019-08-29 16:23
閱讀 1998·2019-08-29 13:51
閱讀 2333·2019-08-26 17:42
