css3 3D 特效
阿新 • • 發佈:2021-01-21
3D 特效
目錄3D 正方體
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>rotate</title> <style> * { margin: 0; padding: 0; } html,body { width: 100%; height: 100%; } body { background: #0A212E; margin: 0px; overflow: hidden; } /* 最外層盒子 */ .boxOuter { width: 200px; margin: 300px auto 0 auto; perspective: 2000px; } /* 包裹正方體的盒子 */ .box { width: 200px; height: 200px; transform-style: preserve-3d; transition: all 2s; position: relative; } /* 正方體六個面的搭建 */ .box>div { width: 200px; height: 200px; position: absolute; /* 新增透明度,方便觀察 */ opacity: 0.7; } .box1 { background-color: tomato; /* 最上面的板, */ transform: translateZ(100px); } .box2 { transform: rotateX(-90deg) translateZ(100px); background-color: springgreen; } .box3 { background-color: rgb(71, 44, 39); transform: translateZ(-100px); } .box4 { transform: rotateX(-90deg) translateZ(-100px); background-color: rgb(58, 31, 94); } .box5 { background-color: rgb(71, 44, 39); transform: rotateY(-90deg) translateZ(100px); } .box6 { transform: rotateY(-90deg) translateZ(-100px); background-color: rgb(58, 31, 94); } .box7 { background-color: tomato; /* 最上面的板, */ transform: translateZ(100px); } .box8 { transform: rotateX(-90deg) translateZ(100px); background-color: springgreen; } .box9 { background-color: rgb(71, 44, 39); transform: translateZ(-100px); } .box10 { transform: rotateX(-90deg) translateZ(-100px); background-color: rgb(58, 31, 94); } .box11 { background-color: rgb(71, 44, 39); transform: rotateY(-90deg) translateZ(100px); } .box12 { transform: rotateY(-90deg) translateZ(-100px); background-color: rgb(58, 31, 94); } /* 正方體滑鼠移入事件 */ .box:hover { transform: rotateY(180deg) rotateX(180deg); } </style> </head> <body> <div class="boxOuter"> <div class="box"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <div class="box5"></div> <div class="box6"></div> <div class="box7 div"></div> <div class="box8 div"></div> <div class="box9 div"></div> <div class="box10 div"></div> <div class="box11 div"></div> <div class="box12 div"></div> </div> </div> <script> var Box = document.querySelector('.box'); var Box7 = document.querySelector('.box7'); var Box8 = document.querySelector('.box8'); var Box9 = document.querySelector('.box9'); var Box10 = document.querySelector('.box10'); var Box11 = document.querySelector('.box11'); var Box12 = document.querySelector('.box12'); console.log(Box7) Box.onmousemove = function(){ Box7.style.cssText = 'transform: translateZ(250px);'; Box8.style.cssText = 'transform: rotateX(-90deg) translateZ(250px);' Box9.style.cssText = 'transform: translateZ(-250px);' Box10.style.cssText = 'transform: rotateX(-90deg) translateZ(-250px);'; Box11.style.cssText = 'transform: rotateY(-90deg) translateZ(250px);' Box12.style.cssText = 'transform: rotateY(-90deg) translateZ(-250px);' } Box.onmouseout = function(){ Box7.style.cssText = 'transform: translateZ(100px);'; Box8.style.cssText = 'transform: rotateX(-90deg) translateZ(100px);' Box9.style.cssText = 'transform: translateZ(-100px);' Box10.style.cssText = 'transform: rotateX(-90deg) translateZ(-100px);'; Box11.style.cssText = 'transform: rotateY(-90deg) translateZ(100px);' Box12.style.cssText = 'transform: rotateY(-90deg) translateZ(-100px);' } </script> </body> </html>
3D 骰子
<!DOCTYPE html> <html lang="en"> <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> *{ padding: 0; margin: 0; } html{ width: 100%; height: 100%; background-image:linear-gradient(to bottom,#29f9f0 0,#000 80%); } .wrapper { width: 200px; margin: 200px auto; perspective:1000px; } .wrapper .cube{ width: 200px; height: 200px; position: relative; /*設定3d環境*/ transform-style:preserve-3d; transform: rotateX(-50deg) rotateY(-50px) ; animation: transform 8s linear infinite; } @keyframes transform{ 0%{ transform:rotateX(0) rotateY(0) rotateZ(0); } 100% { transform:rotateX(720deg) rotateY(360deg) rotateZ(360deg); } } .cube>div{ width: 100%; height: 100%; border: 10px solid #66daff; border-radius: 20px; position: absolute; top: 0; color:#ff92ff; font-size: 36px; font-weight: 100; text-align:center; line-height: 200px; background-color: rgba(51,51,51,.3); } .out-front { transform: translateZ(100px); } .out-back { transform: translateZ(-100px); } .out-left{ transform: translateX(-100px) rotateY(-90deg); } .out-right{ transform: translateX(100px) rotateY(90deg); } .out-top{ transform: translateY(-100px) rotateX(90deg); } .out-bottom { transform: translateY(100px) rotateX(-90deg); } .cube>span{ display: block; width: 90px; height: 90px; position: absolute; top: 50%; left: 50%; margin-top: -45px; margin-left: -45px; border: 5px solid #424242; border-radius: 30%; background-color : #ffe7f9; opacity: 0.7; } .in-front{ transform: translateZ(45px); justify-content: center; align-items:center; } .in-back { transform:translateZ(-45px) ; } .in-left{ transform: translateX(-45px) rotateY(-90deg); } .in-right{ transform: translateX(45px) rotateY(90deg); } .in-top{ transform: translateY(-45px) rotateX(90deg); } .in-bottom{ transform: translateY(45px) rotateX(-90deg); } .points{ display: block; border-radius: 50%; width: 20px; height: 20px; margin:5px; background-color: #bb9aff; } /* 為1點的父盒子設定 */ span.in-front{ display: flex; justify-content: center; align-items: center; } .in-front>span { width: 40px; height: 40px; } /* 為2點的盒子設定 */ span.in-left{ display: flex; justify-content:center; } span.in-left>.pitL2{ align-self: flex-end; } .in-left>span,.in-right>span{ width: 25px; /*2點和4點都是排橫縱兩排,所有設定一樣大小*/ height: 25px; margin: 10px; } /* 設定3點的盒子 */ span.in-back{ display: flex; } .in-back .pitB2{ align-self:center; } .in-back .pitB3{ align-self:flex-end; } /* 設定4點的盒子 */ span.in-right{ display:flex; /* 不設定對齊方式,預設為主軸對齊 */ /* 換行 */ flex-wrap:wrap; } /* 設定5點的盒子 */ span.in-top{ display:flex; } .in-top .pitT1, .in-top .pitT3{ display: flex; flex-direction: column; justify-content: space-between; } .in-top .pitT2{ display:flex; align-self: center; } /* 設定6點的盒子 */ span.in-bottom{ display: flex; flex-wrap:wrap; align-content:space-around; } .cube:hover .out-front { transform: translateZ(200px); } .cube:hover .out-back { transform: translateZ(-200px); } .cube:hover .out-left{ transform: translateX(-200px) rotateY(-90deg); } .cube:hover .out-right{ transform: translateX(200px) rotateY(90deg); } .cube:hover .out-top{ transform: translateY(-200px) rotateX(90deg); } .cube:hover .out-bottom { transform: translateY(200px) rotateX(-90deg); } </style> </head> <body> <div class="wrapper"> <div class="cube"> <div class="out-front">前面</div> <div class="out-back">後面</div> <div class="out-left">左邊</div> <div class="out-right">右邊</div> <div class="out-top">上面</div> <div class="out-bottom">下面</div> <span class="in-front"> <span class="points"></span> </span> <span class="in-back"> <span class="points"></span> <span class="points pitB2"></span> <span class="points pitB3"></span> </span> <span class="in-left"> <span class="points"></span> <span class="points pitL2"></span> </span> <span class="in-right"> <span class="points"></span> <span class="points"></span> <span class="points"></span> <span class="points"></span> </span> <span class="in-top"> <span class="pitT1"> <span class="points"></span> <span class="points"></span> </span> <span class="pitT2"> <span class="points"></span> </span> <span class="pitT3"> <span class="points"> </span> <span class="points"></span> </span> </span> <span class="in-bottom"> <span class="points"></span> <span class="points"></span> <span class="points"></span> <span class="points"></span> <span class="points"></span> <span class="points"></span> </span> </div> </div> </body> </html>
3d選單翻轉
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3實現3d選單翻轉</title> <style type="text/css"> html,body { width: 100%; height: 100%; } body { background: #0A212E; margin: 0px; overflow: hidden; } .nav{ width: 610px; margin: 150px auto; background-color: #fdfdfd; border: 1px #cccccc solid; } .nav:after{ /*本段css主要是解決header標籤中的子元素因為浮動而未將header高度撐起來的問題*/ clear: both; display: block; overflow: hidden; content: ""; } .nav .item{ width: 200px; height: 100px; float: left; border-right: 5px #333333 solid; /*3d元素距離檢視的距離,當元素設定perspective時,它的子元素會獲得一個透視的效果,而不是元素的本身 其實就是z軸的距離,從螢幕到螢幕裡面的距離*/ -webkit-perspective: 4000px; -moz-perspective: 4000px; perspective: 4000px; } .nav .item:last-child{ border-right: none; } .nav .item a{ display: block; height: 100px; /*去掉超連結預設的下邊線*/ text-decoration: none; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } .nav .item a p{ height: 100px; margin: 0; /*設定行高,設定文字距上距下的高,包括文字的高度。這裡與height同高,即垂直方向居中*/ line-height: 100px; color: #ffffff; text-align: center; font-size: 20px; font-famiy: "Microsoft Yahei"; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .nav .item a p:first-child{ background-color: #009900; -webkit-transform: translateZ(50px); -moz-transform: translateZ(50px); -ms-transform: translateZ(50px); -o-transform: translateZ(50px); transform: translateZ(50px); } .nav .item a p:last-child{ background-color: #000099; -webkit-transform: translateZ(50px) rotateX(-90deg); -moz-transform: translateZ(50px) rotateX(-90deg); -ms-transform: translateZ(50px) rotateX(-90deg); -o-transform: translateZ(50px) rotateX(-90deg); transform: translateZ(50px) rotateX(-90deg); margin-top: -50px; } .nav .item a:hover{ -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg); } .nav .item a:hover p:last-child{ margin-top: 0; -webkit-transform: translateZ(0) rotateX(-90deg); -moz-transform: translateZ(0) rotateX(-90deg); -ms-transform: translateZ(0) rotateX(-90deg); -o-transform: translateZ(0) rotateX(-90deg); transform: translateZ(0) rotateX(-90deg); } </style> </head> <body> <header class="nav"> <div class="item"> <a href="#"> <p>首頁</p> <p>Home</p> </a> </div> <div class="item"> <a href="#"> <p>問答</p> <p>Q & A</p> </a> </div> <div class="item"> <a href="#"> <p>關於我們</p> <p>About us</p> </a> </div> </header> </body> </html>
3d按鈕
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
font-family: Arial, sans-serif;
}
#container {
margin: 120px auto;
text-align: center;
}
.button {
-webkit-transform: rotateX( 45deg );
position: relative;
display: inline-block;
width: 100px;
padding: 42px 15px;
margin: 0px 10px;
background-color: #C91826;
color: #fff;
font-weight: bold;
font-size: 40px;
text-decoration: none;
text-align: center;
text-shadow: 0px -1px 0px rgba(0,0,0,0.5);
border: 1px solid;
border-color: #B21522;
border-radius: 78px;
-moz-border-radius: 78px;
-webkit-border-radius: 78px;
box-shadow: inset 0px -4px 5px rgba(255,255,255,0.2),
inset 0px 1px 5px rgba(255,255,255,0.2),
/**/
0px 12px 0px #231F20,
0px 14px 0px #231F20,
0px 16px 0px #231F20,
/**/
0px 8px 5px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px -4px 5px rgba(255,255,255,0.2),
inset 0px 1px 5px rgba(255,255,255,0.2),
/**/
0px 12px 0px #231F20,
0px 14px 0px #231F20,
0px 16px 0px #231F20,
/**/
0px 8px 5px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 5px -4px 5px rgba(255,255,255,0.2),
inset 5px 1px 5px rgba(255,255,255,0.2),
/**/
0px 12px 0px #231F20,
0px 14px 0px #231F20,
0px 16px 0px #231F20;
}
.button:hover {
background-color: #B21522;
color: #e3e3e3;
}
.button:active {
top: 8px;
box-shadow: inset 0px 4px 5px rgba(255,255,255,0.4),
inset 0px -1px 5px rgba(255,255,255,0.2),
/**/
0px 8px 0px #231F20,
/**/
0px 9px 5px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 4px 5px rgba(255,255,255,0.4),
inset 0px -1px 5px rgba(255,255,255,0.2),
/**/
0px 8px 0px #231F20,
/**/
0px 9px 5px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 0px 4px 5px rgba(255,255,255,0.4),
inset 0px -1px 5px rgba(255,255,255,0.2),
/**/
0px 8px 0px #231F20,
/**/
0px 9px 5px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<div id="container">
<a href="#" class="button">開始</a>
<a href="#" class="button">結束</a>
</div>
</body>
</html>