css3D動畫
前言css
本篇文章給你們帶來的內容是關於css實現3d動畫特效的代碼實例，有必定的參考價值，有須要的朋友能夠參考一下，但願對你有所幫助。html
屬性css3
perspective ：透距離，單位像素（值越小，透視距離越近，效果越明顯）：設置父元素上bash
perspective-origin: 設置透視點的位置動畫
transform-style :指定某元素的子元素是位於三維空間內，取值：flat | preserve-3dui
##1、寫一個簡單的立方體spa
1.一個長方體有6個面，咱們寫6個div，並用一個父元素包裹起來。3d
<div class="mofang">
<div class="box mian1">1</div>
<div class="box mian2">2</div>
<div class="box mian3">3</div>
<div class="box mian4">4</div>
<div class="box mian5">5</div>
<div class="box mian6">6</div>
</div>
複製代碼
2.給.mofang設置寬高，並給他設置視距和透視點位置，preserve-3d屬性保留子元素3d轉換code
.mofang{
width: 100px;
height: 100px;
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
perspective: 3000px;
perspective-origin:-100% -150%;
transform-style: preserve-3d;
}
複製代碼
注：視距越小圖形越大，反之越小orm
3.子元素所有絕對定位
.box{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
font-size: 20px;
font-weight: bold;
border: 2px solid black;
position: absolute;
}
複製代碼
4.開始調整6個子元素的位置
.mian1{
background: rgba(255, 255, 0, 0.3);
transform: translateY(50px) rotateX(90deg);
}
複製代碼
效果圖以下：
5.一個面寫好以後，將其他的面都調整好
/*後*/
.mian1{
transform: translateZ(-50px);
}
/*上*/
.mian2{
transform: translateY(-50px) rotateX(90deg);
}
/*左*/
.mian3{
transform: translateX(-50px) rotateY(90deg);
}
/*前*/
.mian4{
transform: translateZ(50px);
}
/*右*/
.mian5{
transform: translateX(50px) rotateY(90deg);
}
/*下*/
.mian6{
transform: translateY(50px) rotateX(90deg);
}
複製代碼
效果圖以下：
css3D動畫能夠實現不少效果
下面是我寫的一些3D動畫效果
demo01
魔方效果
html
<div class="wutai">
<div class="mofang">
<div class="box mian1">
<div class="box1">1</div>
<div class="box1">2</div>
<div class="box1">3</div>
<div class="box1">4</div>
<div class="box1">5</div>
<div class="box1">6</div>
<div class="box1">7</div>
<div class="box1">8</div>
<div class="box1">9</div>
</div>
<div class="box mian2">
<div class="box2">1</div>
<div class="box2">2</div>
<div class="box2">3</div>
<div class="box2">4</div>
<div class="box2">5</div>
<div class="box2">6</div>
<div class="box2">7</div>
<div class="box2">8</div>
<div class="box2">9</div>
</div>
<div class="box mian3">
<div class="box3">1</div>
<div class="box3">2</div>
<div class="box3">3</div>
<div class="box3">4</div>
<div class="box3">5</div>
<div class="box3">6</div>
<div class="box3">7</div>
<div class="box3">8</div>
<div class="box3">9</div>
</div>
<div class="box mian4">
<div class="box4">1</div>
<div class="box4">2</div>
<div class="box4">3</div>
<div class="box4">4</div>
<div class="box4">5</div>
<div class="box4">6</div>
<div class="box4">7</div>
<div class="box4">8</div>
<div class="box4">9</div>
</div>
<div class="box mian5">
<div class="box5">1</div>
<div class="box5">2</div>
<div class="box5">3</div>
<div class="box5">4</div>
<div class="box5">5</div>
<div class="box5">6</div>
<div class="box5">7</div>
<div class="box5">8</div>
<div class="box5">9</div>
</div>
<div class="box mian6">
<div class="box6">1</div>
<div class="box6">2</div>
<div class="box6">3</div>
<div class="box6">4</div>
<div class="box6">5</div>
<div class="box6">6</div>
<div class="box6">7</div>
<div class="box6">8</div>
<div class="box6">9</div>
</div>
</div>
複製代碼
css
<style type="text/css">
html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.wutai{
width: 100%;
height: 100%;
border: 1px solid black;
/* background: black; */
margin: 0 auto;
}
.mofang{
width: 100px;
height: 100px;
/* perspective: 2500px;
perspective-origin:-500% -550%; */
transform-style: preserve-3d;
animation: texiao 10s linear infinite alternate;
}
.box{
width: 90px;
height: 90px;
margin: 100px;
text-align: center;
line-height: 30px;
display: grid;
grid-template-columns: 30px 30px 30px;
grid-template-rows:30px 30px 30px;
position: absolute;
}
.box .box1{
border: 1px solid white;
background: #AACCEE;
}
.box .box2{
border: 1px solid white;
background: #FF9966;
}
.box .box3{
border: 1px solid white;
background: #00FFFF;
}
.box .box4{
border: 1px solid white;
background: #FF0000;
}
.box .box5{
border: 1px solid white;
background: #FFFF00;
}
.box .box6{
border: 1px solid white;
background: blueviolet;
}
/* 後*/
.mian1{
transform: translateZ(-45px);
}
/* 左*/
.mian2{
transform: translateX(-45px) rotateY(90deg);
}
/* 上*/
.mian3{
transform: translateY(-45px) rotateX(90deg);
}
/* 右*/
.mian4{
transform: translateX(45px) rotateY(90deg);
}
/* 下*/
.mian5{
transform: translateY(45px) rotateX(90deg);
}
/* 前*/
.mian6{
transform: translateZ(45px);
}
@keyframes texiao{
0%{transform: translate(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
50%{transform: translate(400px) rotateX(0deg) rotateY(360deg) rotateZ(90deg);}
100%{transform: translate(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
}
</style>
複製代碼
demo02
多重立體圖
html
<div class="wutai">
<div class="mofang">
<div class="box mian1">1</div>
<div class="box mian2">2</div>
<div class="box mian3">3</div>
<div class="box mian4">4</div>
<div class="box mian5">5</div>
<div class="box mian6">6</div>
<div class="xiaomofang">
<div class="box1 mian7">7</div>
<div class="box1 mian8">8</div>
<div class="box1 mian9">9</div>
<div class="box1 mian10">10</div>
<div class="box1 mian11">11</div>
<div class="box1 mian12">12</div>
</div>
</div>
</div>
複製代碼
css
<style type="text/css">
.wutai{
width: 700px;
height: 500px;
border: 1px solid black;
background: black;
margin: 0 auto;
/*******/
perspective: 3000px;
perspective-origin:-100% -150%;
/******/
}
.mofang{
width: 100px;
height: 100px;
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
/******/
perspective: 3000px;
perspective-origin:-100% -150%;
transition: all 500s linear;
transform-style: preserve-3d;
/******/
}
.box{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
/* color: white; */
font-size: 20px;
font-weight: bold;
background: rgba(0,0,0,0.5);
border: 2px solid black;
position: absolute;
/******/
transition: all 10s linear;
/******/
}
.mian1{
transform: translateZ(-50px);
}
.mian2{
transform: translateY(-50px) rotateX(90deg);
}
.mian3{
transform: translateX(-50px) rotateY(90deg);
}
.mian4{
transform: translateZ(50px);
}
.mian5{
transform: translateX(50px) rotateY(90deg);
}
.mian6{
transform: translateY(50px) rotateX(90deg);
}
.xiaomofang{
width: 50px;
height: 50px;
position: absolute;
top: calc(50% - 25px);
left: calc(50% - 25px);
perspective: 3000px;
perspective-origin:-100% -150%;
/******/
transform-style: preserve-3d;
transition: all 100s linear;
/******/
}
.box1{
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 20px;
font-weight: bold;
background: rgba(255,255,255,0.2);
border: 2px solid black;
transform-style: preserve-3d;
position: absolute;
}
.xiaomofang .mian7{
transform: translateZ(-27px);
}
.xiaomofang .mian8{
transform: translateY(-27px) rotateX(90deg);
}
.xiaomofang .mian9{
transform: translateX(-27px) rotateY(90deg);
}
.xiaomofang .mian10{
transform: translateZ(27px);
}
.xiaomofang .mian11{
transform: translateY(27px) rotateX(90deg);
}
.xiaomofang .mian12{
transform: translateX(27px) rotateY(90deg);
}
.mofang:hover .mian1{
transform: translateZ(-170px);
background: #00FFFF;
opacity: 0.7;
color: white;
}
.mofang:hover .mian2{
transform: translateY(-170px) rotateX(90deg);
background: #AACCEE;
opacity: 0.7;
color: white;
}
.mofang:hover .mian3{
transform: translateX(-170px) rotateY(90deg);
background: #DCDCDC;
opacity: 0.7;
color: white;
}
.mofang:hover .mian4{
transform: translateZ(170px);
background: #FF0000;
opacity: 0.7;
color: white;
}
.mofang:hover .mian5{
transform: translateX(170px) rotateY(90deg);
background: #FFD700;
opacity: 0.7;
color: white;
}
.mofang:hover .mian6{
transform: translateY(170px) rotateX(90deg);
background: #FF00FF;
opacity: 0.7;
color: white;
}
.mofang:hover{
transform: rotateX(36000deg);
}
.mofang:hover .xiaomofang{
transform: rotateX(9000deg) rotateY(18000deg) rotateZ(36000deg);
}
</style>
複製代碼
demo03
圓柱效果
html
<div class="wutai">
<div class="yuanzhu">
<div class="box mian1">1</div>
<div class="box mian2">2</div>
<div class="box mian3">3</div>
<div class="box mian4">4</div>
<div class="box mian5">5</div>
<div class="box mian6">6</div>
<div class="box mian7">7</div>
<div class="box mian8">8</div>
<div class="box mian9">9</div>
<div class="box mian10">10</div>
<div class="box mian11">11</div>
<div class="box mian12">12</div>
</div>
</div>
複製代碼
css
<style>
.wutai{
width: 900px;
height: 600px;
border: 1px solid;
margin: 0px auto;
perspective: 1000px;
perspective-origin: 50% 1%;
}
.wutai .yuanzhu{
width: 100px;
height: 300px;
margin: 0 auto;
position: relative;
top: 150px;
border: 0px solid red;
transform-style: preserve-3d;
}
.yuanzhu:hover{
transform: rotateY(36000000deg);
transition: all 1000000s linear;
}
.wutai .yuanzhu .box{
width: 100px;
height:300px;
text-align: center;
line-height: 300px;
font-size: 40px;
color: white;
position: absolute;
}
.mian1{
background: red;
transform: rotateY(30deg) translateZ(200px) ;
}
.mian2{
background: orange;
transform: rotateY(60deg) translateZ(200px);
}
.mian3{
background: yellow;
transform: rotateY(90deg) translateZ(200px);
}
.mian4{
background: green;
transform: rotateY(120deg) translateZ(200px);
}
.mian5{
background: cyan;
transform: rotateY(150deg) translateZ(200px);
}
.mian6{
background: blue;
transform: rotateY(180deg) translateZ(200px);
}
.mian7{
background: purple;
transform: rotateY(210deg) translateZ(200px);
}
.mian8{
background: blue;
transform: rotateY(240deg) translateZ(200px);
}
.mian9{
background: cyan;
transform: rotateY(270deg) translateZ(200px);
}
.mian10{
background: green;
transform: rotateY(300deg) translateZ(200px);
}
.mian11{
background: yellow;
transform: rotateY(330deg) translateZ(200px);
}
.mian12{
background: orange;
transform: rotateY(360deg) translateZ(200px);
}
</style>
複製代碼
demo04
齒輪效果
html
<div class="wutai">
<div class="chilun one">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="chilun two">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="chilun3 three">
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
</div>
</div>
複製代碼
css
<style type="text/css">
html,body,div{
margin: 0;
padding: 0;
}
.wutai{
width: 700px;
height: 500px;
border: 1px solid black;
margin: 0 auto;
position: relative;
}
.chilun{
width: 60px;
height: 60px;
background: black;
border-radius: 50%;
position: absolute;
}
.chilun3{
width: 120px;
height: 120px;
background: black;
border-radius: 50%;
position: absolute;
}
.one{
top: 47px;
left: 53px;
animation: xuanzhuan 1.5s linear infinite;
}
.two{
top:97px;
left: 104px;
animation: xuanzhuan2 1.5s linear infinite;
}
.three{
top: 102px;
left: 173px;
animation: xuanzhuan3 3s linear infinite;
}
@keyframes xuanzhuan{
0%{transform: rotate(0deg);}
100%{transform: rotateZ(360deg);}
}
@keyframes xuanzhuan2{
0%{transform: rotate(0deg);}
100%{transform: rotateZ(-360deg);}
}
@keyframes xuanzhuan3{
0%{transform: rotate(0deg);}
100%{transform: rotateZ(360deg);}
}
.box{
width: 16px;
height: 80px;
background: black;
position: absolute;
left: calc(50% - 8px);
top: calc(50% - 40px);
}
.box:nth-child(2){
transform: rotateZ(60deg);
}
.box:nth-child(3){
transform: rotateZ(120deg);
}
.box1{
width: 16px;
height: 140px;
background: black;
position: absolute;
left: calc(50% - 8px);
top: calc(50% - 70px);
}
.box1:nth-child(2){
transform: rotateZ(30deg);
}
.box1:nth-child(3){
transform: rotateZ(60deg);
}
.box1:nth-child(4){
transform: rotateZ(90deg);
}
.box1:nth-child(5){
transform: rotateZ(120deg);
}
.box1:nth-child(6){
transform: rotateZ(150deg);
}
</style>
複製代碼
若是文中有不妥或者錯誤的地方還望高手的您指出，以避免誤人子弟。
若是您有更好的建議，不如留言一塊兒討論，共同進步！ 再次感謝您耐心的讀完本篇文章。
vx:bsl521921
相關文章
- 1. css3D動畫
- 2. Css3D轉換和關鍵幀動畫
- 3. css3D
- 4. css3D的魅力
- 5. CSS3D 轉換調試
- 6. three.js css3d - 元素週期表
- 7. css3D旋轉立方體
- 8. iOS動畫——彈窗動畫（pop動畫）
- 9. Android動畫總結（屬性動畫，補間動畫，幀動畫）
- 10. Android 動畫詳解：屬性動畫、View 動畫和幀動畫
- 更多相關文章...
- • ionic 加載動畫 - ionic 教程
- • PHP imagearc - 畫橢圓弧 - PHP參考手冊
- • 算法總結-滑動窗口
- • SpringBoot中properties文件不能自動提示解決方法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 在windows下的虛擬機中,安裝華爲電腦的deepin操作系統
- 2. 強烈推薦款下載不限速解析神器
- 3. 【區塊鏈技術】孫宇晨：區塊鏈技術帶來金融服務的信任變革
- 4. 搜索引起的鏈接分析-計算網頁的重要性
- 5. TiDB x 微衆銀行 | 耗時降低 58%，分佈式架構助力實現普惠金融
- 6. 《數字孿生體技術白皮書》重磅發佈（附完整版下載）
- 7. 雙十一「避坑」指南：區塊鏈電子合同爲電商交易保駕護航！
- 8. 區塊鏈產業，怎樣「鏈」住未來？
- 9. OpenglRipper使用教程
- 10. springcloud請求一次好用一次不好用zuul Name or service not known
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. css3D動畫
- 2. Css3D轉換和關鍵幀動畫
- 3. css3D
- 4. css3D的魅力
- 5. CSS3D 轉換調試
- 6. three.js css3d - 元素週期表
- 7. css3D旋轉立方體
- 8. iOS動畫——彈窗動畫（pop動畫）
- 9. Android動畫總結（屬性動畫，補間動畫，幀動畫）
- 10. Android 動畫詳解：屬性動畫、View 動畫和幀動畫