整合營銷服務商
          
				
          電腦端+手機端+微信端=數據同步管理
          
			
          
			
          				
				
          免費咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          抖音上很火的3D立體動態相冊實現代碼！趕快學起來吧
          
        
           
          
	
	
          
		
                        
          言：
          圣誕節快到了，是不是要給女朋友或者正在追求的妹子一點小驚喜呢，今天這篇博客就分享下前端代碼如何實現3D立體動態相冊。趕緊學會了，來制作屬于我們程序員的浪漫吧！先上效果圖，來引起下你們的興趣。
           正文：
          一、新建一個index.html的文件，代碼如下
          <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>純CSS實現鼠標經過3D立體動態展示圖片特效代碼</title>
<link type="text/css" href="css/style.css" rel="stylesheet" />
</head>
<body>
<div class="box">
	<ul class="minbox">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<ol class="maxbox">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ol>
</div>
</body>
</html>
          二、css樣式的代碼
          @charset "utf-8";
*{
	margin:0;
	padding:0;
}
body{
	max-width: 100%;
	min-width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size:100% 100%;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
}
li{
	list-style: none;
}
.box{
	width:200px;
	height:200px;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size:100% 100%;
	position: absolute;
	margin-left: 42%;
	margin-top: 22%;
	-webkit-transform-style:preserve-3d;
	-webkit-transform:rotateX(13deg);
	-webkit-animation:move 5s linear infinite;
}
.minbox{
	width:100px;
	height:100px;
	position: absolute;
	left:50px;
	top:30px;
	-webkit-transform-style:preserve-3d;
}
.minbox li{
	width:100px;
	height:100px;
	position: absolute;
	left:0;
	top:0;
}
.minbox li:nth-child(1){
	background: url(../img/01.png) no-repeat 0 0;
	-webkit-transform:translateZ(50px);
}
.minbox li:nth-child(2){
	background: url(../img/02.png) no-repeat 0 0;
	-webkit-transform:rotateX(180deg) translateZ(50px);
}
.minbox li:nth-child(3){
	background: url(../img/03.png) no-repeat 0 0;
	-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.minbox li:nth-child(4){
	background: url(../img/04.png) no-repeat 0 0;
	-webkit-transform:rotateX(90deg) translateZ(50px);
}
.minbox li:nth-child(5){
	background: url(../img/05.png) no-repeat 0 0;
	-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.minbox li:nth-child(6){
	background: url(../img/06.png) no-repeat 0 0;
	-webkit-transform:rotateY(90deg) translateZ(50px);
}
.maxbox li:nth-child(1){
	background: url(../img/1.png) no-repeat 0 0;
	-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(2){
	background: url(../img/2.png) no-repeat 0 0;
	-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(3){
	background: url(../img/3.png) no-repeat 0 0;
	-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.maxbox li:nth-child(4){
	background: url(../img/4.png) no-repeat 0 0;
	-webkit-transform:rotateX(90deg) translateZ(50px);
}
.maxbox li:nth-child(5){
	background: url(../img/5.png) no-repeat 0 0;
	-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.maxbox li:nth-child(6){
	background: url(../img/6.png) no-repeat 0 0;
	-webkit-transform:rotateY(90deg) translateZ(50px);
}
.maxbox{
	width: 800px;
	height: 400px;
	position: absolute;
	left: 0;
	top: -20px;
	-webkit-transform-style: preserve-3d;
	
}
.maxbox li{
	width: 200px;
	height: 200px;
	background: #fff;
	border:1px solid #ccc;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0.2;
	-webkit-transition:all 1s ease;
}
.maxbox li:nth-child(1){
	-webkit-transform:translateZ(100px);
}
.maxbox li:nth-child(2){
	-webkit-transform:rotateX(180deg) translateZ(100px);
}
.maxbox li:nth-child(3){
	-webkit-transform:rotateX(-90deg) translateZ(100px);
}
.maxbox li:nth-child(4){
	-webkit-transform:rotateX(90deg) translateZ(100px);
}
.maxbox li:nth-child(5){
	-webkit-transform:rotateY(-90deg) translateZ(100px);
}
.maxbox li:nth-child(6){
	-webkit-transform:rotateY(90deg) translateZ(100px);
}
.box:hover ol li:nth-child(1){
	-webkit-transform:translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(2){
	-webkit-transform:rotateX(180deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(3){
	-webkit-transform:rotateX(-90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(4){
	-webkit-transform:rotateX(90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(5){
	-webkit-transform:rotateY(-90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(6){
	-webkit-transform:rotateY(90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
@keyframes move{
	0%{
		-webkit-transform: rotateX(13deg) rotateY(0deg);
	}
	100%{
		-webkit-transform:rotateX(13deg) rotateY(360deg);
	}
}
          三、文件的目錄結構，把css文件放到css文件夾里，圖片放到img文件夾里。
          四、圖片尺寸不會修改的，可以選擇使用美圖秀秀網頁版很簡單
          五、容易出現的問題 ，圖片展示不全或展示的方向不對
          1.圖片尺寸需要修改 （解決展示不全的情況）
          上圖是我的圖片文件夾里放的圖片 ，首先01-06編號命名的圖片尺寸是100x100px的大小的，1-6編號是400x400px，如果效果想展示最佳，100x100px的圖片是以頭部特寫的照片最好，因為01-06是立體照片內部小正方體的照片，1-6編號是外部正方體的照片。
          2.圖片的方向需要修改（解決頭朝下的問題）
          修改的方向如上圖展示所示，比如第三張頭就應該朝下，否則形成的效果圖像會出現頭是倒著的情況。
          六、放一下動態效果圖
          總結：
           生活雖然總有辛酸，但是我們不應該減少去創造生活的樂趣，不斷尋找屬于自己的那份快樂，才應該是我們生活的態度。
          我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。
          原文鏈接：https://blog.csdn.net/jdk_wangtaida/article/details/103253883
          求是：設置一個展示照片的區域，下面有上一張，下一張，點擊會切換照片。
          實現思路：設置最小下標（minIndex）為 1 ，最大下標（maxIndex）為4，剛開始讓 最小下標為1，點擊下一頁，讓下標加1，如果加到最大下標了，讓他等于最小下標1，這樣就能循環著，展示這4張?；ㄕ掌?，點擊的時候通過 ApI: setAttribute("src", url) 設置image標簽的 src 屬性，就可以了。簡單吧。
          網上找幾張美女照片，放到images目錄下?？靵韺崿F一下吧。





          <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>圖片切換</title>
  </head>
  <body>
    <!-- 4    1    4 -->
    <img src="images/image01.jpg" id="flower" width="200" height="200" />
    <br />
    <button id="prev">上一張</button>
    <button id="next">下一張</button>
    <script type="text/javascript">
      // 1.獲取事件源 需要的標簽
      var flower = document.getElementById("flower")
      var nextBtn = document.getElementById("next")
      var prevBtn = document.getElementById("prev")

      var minIndex = 1,
        maxIndex = 4
      currentIndex = minIndex
      // 2.監聽按鈕的點擊
      nextBtn.onclick = function () {
        if (currentIndex === maxIndex) {
          // 到最后一張了
          currentIndex = minIndex
        } else {
          currentIndex++
        }

        flower.setAttribute("src", `images/image0${currentIndex}.jpg`)
      }

      prevBtn.onclick = function () {
        if (currentIndex === minIndex) {
          // 到最后一張了
          currentIndex = maxIndex
        } else {
          currentIndex--
        }
        flower.setAttribute("src", `images/image0${currentIndex}.jpg`)
      }
    </script>
  </body>
</html>

          效果如圖：
          言
          前段時間小編刷抖音的時候，刷到了咱們前端小伙伴制作的3D炫酷相冊，居然那么火，細思一下，隨著3D動畫的普及，廣泛的運作在各個平臺，各官網都在實現3D頁面。它可以更接近于真實的展示我們的產品和介紹，帶來極強的視覺沖擊感。所以說，為了讓自己更加優秀，css3 3D動畫必不可少。下面這篇文章，將帶你初步了解CSS3實現酷炫的3D旋轉透視



          要想自己的網頁能有3D特效，必須要會透視。
          透視 perspective(基礎問題，可以在我的推薦書籍中學習到)
          • 在2D平面產生近大遠小視覺立體，但是只是效果二維的
          • 如果想在網頁產生3D效果需要透視（理解成3D物體投影在2D平面內）。
          • 模擬人類的視覺位置，可認為安排一只眼睛去看
          • 透視我們也稱為視距：視距就是人的眼睛到屏幕的距離
          • 距離視覺點越近的在電腦平面成像越大，越遠成像越小
          • 透視的單位是像素

          圖片來源網絡
          正文：
        1. CSS3 3D 轉換的常用API介紹
        2. CSS3 3D 應用場景
        3. CSS3 3D 實現一個立方體
          4. 1.CSS3 3D 轉換的常用API介紹
          首先先上一張css 3D的坐標系：

           接下來我們來介紹幾個常用的api：

          旋轉
          • rotateX()
          • rotateY()
          • rotateZ() 以上幾個api分別代表繞x，y，z軸旋轉，如下例子為繞x軸旋轉的例子：


          相關代碼如下：
          <style>
.d3-wrap {
 position: relative;
 width: 300px;
 height: 300px;
 margin: 120px auto;
 /* 規定如何在 3D 空間中呈現被嵌套的元素 */
 transform-style: preserve-3d;
 transform: rotateX(0) rotateY(45deg);
 transform-origin: 150px 150px 150px;
}

.rotateX {
 width: 200px;
 height: 200px;
 background-color: #06c;
 transition: transform 2s;
 animation: rotateX 6s infinite;
}

@keyframes rotateX {
 0% {
 transform: rotateX(0);
 }
 100% {
 transform: rotateX(360deg);
 } 
}
</style>
<div class="d3-wrap">
 <div class="rotateX"></div>
</div>
復制代碼
          位移（Transform）
          • translateX(x) 定義 3D 轉化，僅使用用于 X 軸的值
          • translateY(y) 定義 3D 轉化，僅使用用于 Y 軸的值
          • translateZ(z) 定義 3D 轉化，僅使用用于 Z 軸的值 以上幾個api分別代表相對x，y，z軸的位移，如下例子為向z軸位移的例子：

           這里我們需要注意的是為了能看出位移的效果，我們需要在父容器上加如下屬性：

          .d3-wrap {
 transform-style: preserve-3d;
 perspective: 500;
 /* 設置元素被查看位置的視圖 */
 -webkit-perspective: 500;
}
          當為元素定義 perspective 屬性時，其子元素會獲得透視效果，而不是元素本身。 代碼如下：
          .d3-wrap {
 position: relative;
 width: 300px;
 height: 300px;
 margin: 120px auto;
 transform-style: preserve-3d;
 perspective: 500;
 -webkit-perspective: 500;
 transform: rotateX(0) rotateY(45deg);
 transform-origin: center center;
}

.transformZ {
 width: 200px;
 height: 200px;
 background-color: #06c;
 transition: transform 2s;
 animation: transformZ 6s infinite;
}

@keyframes transformZ {
 0% {
 transform: translateZ(100px);
 }
 100% {
 transform: translateZ(0);
 } 
}
          3D縮放
          • scaleX(x) 給定一個 X 軸的3D 縮放轉換值
          • scaleY(x) 給定一個 Y 軸的3D 縮放轉換值
          • scaleZ(x) 給定一個 Z 軸的3D 縮放轉換值 縮放設置和上面的類似，這里就不做過多介紹了。
          理論上說以上三種常見變換已經夠用了，值得關注的是我們要想讓元素呈現出3D效果，以下不可忽視的API也很重要：

          2.CSS3 3D 應用場景
          css 3D主要應用在網站的交互和模型效果上，比如：
          • 3D輪播圖
          • 3D產品介紹
          • 室內3D仿真
          • h5 3D活動頁面，比較典型的就是某年淘寶的年終總結H5
          • 3D數據可視化成圖
          • 3D模型圖 其實如果css 3D用的熟悉了，一些基本的3D模型完全可以用css畫出來。
          3.CSS3 3D 實現一個立方體

          核心思路就是用6個面去拼接，通過設置rotate和translate來調整相互之間的位置，如下：


          具體代碼如下：
          .container {
 position: relative;
 width: 300px;
 height: 300px;
 margin: 120px auto;
 transform-style: preserve-3d;
 /* 為了讓其更有立體效果 */
 transform: rotateX(-30deg) rotateY(45deg);
 transform-origin: 150px 150px 150px;
 animation: rotate 6s infinite;
}
.container .page {
 position: absolute;
 width: 300px;
 height: 300px;
 text-align: center;
 line-height: 300px;
 color: #fff;
 background-size: cover;
}
.container .page:first-child {
 background-image: url(./my.jpeg);
 background-color: rgba(0,0,0,.2);
}
.container .page:nth-child(2) {
 transform: rotateX(90deg);
 transform-origin: 0 0;
 transition: transform 10s;
 background-color: rgba(179, 15, 64, 0.6);
 background-image: url(./my2.jpeg);
}

.container .page:nth-child(3) {
 transform: translateZ(300px);
 background-color: rgba(22, 160, 137, 0.7);
 background-image: url(./my3.jpeg);
}

.container .page:nth-child(4) {
 transform: rotateX(-90deg);
 transform-origin: -300px 300px;
 background-color: rgba(210, 212, 56, 0.2);
 background-image: url(./my4.jpeg);
}
.container .page:nth-child(5) {
 transform: rotateY(-90deg);
 transform-origin: 0 0;
 background-color: rgba(201, 23, 23, 0.6);
 background-image: url(./my5.jpeg);
}
.container .page:nth-child(6) {
 transform: rotateY(-90deg) translateZ(-300px);
 transform-origin: 0 300px;
 background-color: rgba(16, 149, 182, 0.2);
 background-image: url(./my6.jpeg);
}
          html結構
          <div class="container">
 <div class="page">A</div>
 <div class="page">B</div>
 <div class="page">C</div>
 <div class="page">D</div>
 <div class="page">E</div>
 <div class="page">F</div>
</div>
          擴展
          我們可以基于上面介紹的，給父元素添加動畫或者拖拽效果，這樣就可以做成更有交互性的3D方塊了，比如置骰子游戲，vr場景，3D相冊等等，具體實現我會抽空依次總結出來，記得關注哦～




          作者：徐小夕_Lab實驗室
          鏈接：https://juejin.im/post/5dd16b39f265da0bca78958e

          喜歡小編的可以點個贊關注小編哦，小編每天都會給大家分享文章。
          我自己是一名從事了多年的前端老程序員，小編為大家準備了新出的前端編程學習資料，免費分享給大家！
          如果你也想學習前端，那么幫忙轉發一下然后再關注小編后私信【1】可以得到我整理的這些前端資料了（私信方法：點擊我頭像進我主頁有個上面有個私信按鈕）
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
精品视频在线观看一区二区
|
国产视频一区在线播放|
怡红院美国分院一区二区
|
在线视频国产一区|
美女毛片一区二区三区四区|
国产美女视频一区|
国产精华液一区二区区别大吗|
亚洲国产一区二区三区在线观看
|
国产一区二区三区手机在线观看
|
国产精品免费综合一区视频|
久久精品黄AA片一区二区三区
|
国产裸体舞一区二区三区|
国产高清一区二区三区
|
国产免费播放一区二区|
欧洲精品码一区二区三区免费看
|
在线|一区二区三区|
国产精品无码一区二区在线观一|
日本一区高清视频|
精品免费国产一区二区|
国产SUV精品一区二区四
|
国产日韩AV免费无码一区二区
|
在线视频亚洲一区|
波多野结衣一区二区免费视频|
日韩精品一区二区三区在线观看l
日韩精品一区二区三区毛片
|
香蕉视频一区二区|
一区二区三区无码视频免费福利|
激情综合一区二区三区|
中文字幕亚洲一区二区va在线|
精品日韩在线视频一区二区三区|
国产精品第一区第27页|
中日韩一区二区三区|
免费视频精品一区二区三区|
无码精品一区二区三区免费视频|
国产麻豆剧果冻传媒一区|
精品一区二区三区四区在线播放|
亚洲福利电影一区二区?|
中文字幕不卡一区|
亚洲一区免费观看|
亚洲av无码成人影院一区|
国产精品一区二区三区久久|
一区二区三区伦理高清|