css3相冊圖片3D旋轉展示特效

来源:http://www.cnblogs.com/jihua/archive/2016/01/06/picxuanzhuan.html
-Advertisement-
Play Games

查看效果：http://hovertree.com/texiao/css/14/本效果用css3的animation實現動畫定義和用法animation 屬性是一個簡寫屬性，用於設置六個動畫屬性：animation-nameanimation-durationanimation-timing-fun...


查看效果：http://hovertree.com/texiao/css/14/

本效果用css3的animation實現動畫

定義和用法
animation 屬性是一個簡寫屬性，用於設置六個動畫屬性：
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
註釋：請始終規定 animation-duration 屬性，否則時長為 0，就不會播放動畫了。

預設值： none 0 ease 0 1 normal
繼承性： no
版本： CSS3
JavaScript 語法： object.style.animation="movehovertree 5s infinite"


語法
animation: name duration timing-function delay iteration-count direction;

animation-name 規定需要綁定到選擇器的 keyframe 名稱。。
animation-duration 規定完成動畫所花費的時間，以秒或毫秒計。
animation-timing-function 規定動畫的速度曲線。
animation-delay 規定在動畫開始之前的延遲。
animation-iteration-count 規定動畫應該播放的次數。
animation-direction 規定是否應該輪流反向播放動畫。

示例：http://hovertree.com/texiao/css/14/1.htm

 

楊穎

圖片旋轉代碼如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3女神來襲 - 何問起</title>
<style>
body {
margin: 0;
background: #000;
}

#wrap {
width: 300px;
height: 400px;
position: relative;
margin: 100px auto;
-webkit-perspective: 3000px;
-moz-perspective: 3000px;
-ms-transform: perspective(3000px);
-ms-perspective: 3000px;
}

#head {
width: 100%;
height: 100%;
position: absolute;
-webkit-transform-style: preserve-3d;
-webkit-animation: donghua 15s linear 0s infinite;
-moz-transform-style: preserve-3d;
-moz-animation: donghua 15s linear 0s infinite;
-ms-transform-style: preserve-3d;
-ms-animation: donghua 25s linear 0s infinite;
}

#head div {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 400px;
border: 1px solid red;
text-align: center;
line-height: 100px;
}

#head div:nth-child(1) {
-webkit-transform: rotateY(0deg) translateZ(400px);
-moz-transform: rotateY(0deg) translateZ(400px);
-ms-transform: rotateY(0deg) translateZ(400px);
background: url(http://hovertree.com/texiao/css/14/hovertreepic/01.jpg);
background-size: cover;
}

#head div:nth-child(2) {
-webkit-transform: rotateY(36deg) translateZ(500px);
-moz-transform: rotateY(36deg) translateZ(500px);
-ms-transform: rotateY(36deg) translateZ(500px);
background: url(http://hovertree.com/texiao/css/14/hovertreepic/02.jpg);
background-size: cover;
}

#head div:nth-child(3) {
-webkit-transform: rotateY(72deg) translateZ(400px);
-moz-transform: rotateY(72deg) translateZ(400px);
-ms-transform: rotateY(72deg) translateZ(400px);
background: url(http://cms.hovertree.com/hvtimg/201511/9rour12a.jpg);
background-size: cover;
}

#head div:nth-child(4) {
-webkit-transform: rotateY(108deg) translateZ(500px);
-moz-transform: rotateY(108deg) translateZ(500px);
-ms-transform: rotateY(108deg) translateZ(500px);
background: url(http://hovertree.com/texiao/css/14/hovertreepic/04.jpg);
background-size: cover;
}

#head div:nth-child(5) {
-webkit-transform: rotateY(144deg) translateZ(400px);
-moz-transform: rotateY(144deg) translateZ(400px);
-ms-transform: rotateY(144deg) translateZ(400px);
background: url(http://hovertree.com/texiao/css/14/hovertreepic/05.jpg);
background-size: cover;
}

#head div:nth-child(6) {
-webkit-transform: rotateY(180deg) translateZ(500px);
-moz-transform: rotateY(180deg) translateZ(500px);
-ms-transform: rotateY(180deg) translateZ(500px);
background: url(http://hovertree.com/texiao/css/14/hovertreepic/06.jpg);
background-size: cover;
}

#head div:nth-child(7) {
-webkit-transform: rotateY(216deg) translateZ(400px);
-moz-transform: rotateY(216deg) translateZ(400px);
-ms-transform: rotateY(216deg) translateZ(400px);
background: url(http://hovertree.com/texiao/css/14/hovertreepic/07.jpg);
background-size: cover;
}

#head div:nth-child(8) {
-webkit-transform: rotateY(252deg) translateZ(500px);
-moz-transform: rotateY(252deg) translateZ(500px);
-ms-transform: rotateY(252deg) translateZ(500px);
background: url(http://hovertree.com/texiao/css/14/hovertreepic/08.jpg);
background-size: cover;
}

#head div:nth-child(9) {
-webkit-transform: rotateY(288deg) translateZ(400px);
-moz-transform: rotateY(288deg) translateZ(400px);
-ms-transform: rotateY(288deg) translateZ(400px);
background: url(http://hovertree.com/hvtimg/201511/6j9j6tk5.png);
background-size: cover;
}

#head div:nth-child(10) {
-webkit-transform: rotateY(324deg) translateZ(500px);
-moz-transform: rotateY(324deg) translateZ(500px);
-ms-transform: rotateY(324deg) translateZ(500px);
background: url(http://cms.hovertree.com/hvtimg/201512/wfevf6yh.jpg);
background-size: cover;
}

@-webkit-keyframes donghua {
0% {
transform: rotateX(5deg) rotateY(360deg);
}

50% {
transform: rotateX(-5deg) rotateY(180deg);
}

100% {
transform: rotateX(5deg) rotateY(0deg);
}
}

@-moz-keyframes donghua {
0% {
transform: rotateY(10deg) rotateY(0deg);
}

50% {
transform: rotateY(-10deg) rotateY(180deg);
}

100% {
transform: rotateY(10deg) rotateY(360deg);
}
}

@-ms-keyframes donghua {
0% {
transform: rotateY(10deg) rotateY(0deg);
}

50% {
transform: rotateY(-10deg) rotateY(180deg);
}

100% {
transform: rotateY(10deg) rotateY(360deg);
}
}a{color:white}
</style>
</head>
<body>

<div id="wrap">
<div id="head">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div><div style="margin:0px auto;text-align:center;width:736px">
<h2>圖片立體旋轉</h2><a href="http://hovertree.com/">首頁</a> <a href="http://hovertree.com/texiao/">特效</a>
<a href="http://hovertree.com/h/bjaf/a6598spx.htm">原文</a>
  <a href="http://hovertree.com/texiao/css/14/1.htm">Demo 2</a></div>
</body>
</html>

更多： http://www.cnblogs.com/jihua/p/webfront.html


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • jQuery清除緩存實例代碼
    jQuery清除緩存實例代碼:緩存是個好東西，但是有些情況下則會出現一些麻煩，比如驗證碼不能刷新等等，尤其是在IE瀏覽器下麵，本章節就簡單介紹一下如何清除緩存以避免一些不必要的困擾，解決方案一:使用ajax方法的時候可以設置cache的參數為false。代碼如下:$.ajaxSetup ({ cac...
  • 點擊按鈕之後將其設置為不可用狀態
    點擊按鈕之後將其設置為不可用狀態:不少效果中，希望按鈕只能夠被點擊一次，再點擊之後就會被設置為不可用，代碼非常的簡單。代碼如下:點擊按鈕之後將其設置為不可用-螞蟻部落以上代碼在點擊按鈕之後，可以將其設置為不可用狀態，代碼非常簡單，這裡就不介紹了。相關參閱:1.onclick事件可以參閱javascr...
  • CSS實現的背景圖片替代顏色代碼
    CSS實現的背景圖片替代顏色代碼:有時候在背景圖片由於網路或者其他原因沒有顯示的時候，可以使用指定的背景顏色替代，下麵就是一段能夠實現此功能的代碼:background: url("a.jpg") no-repeat #ccc;原文地址是:http://www.softwhy.com/forum.p...
  • jQuery列印json格式對象實例代碼
    jQuery列印json格式對象實例代碼:所謂的json格式對象其實就是對象直接量，很多教程多說這是json對象，其實這是不正確。下麵是一段列印json格式對象的實例代碼，希望能夠對初學者有所幫助。代碼如下: 螞蟻部落 原文地址是:http://www.softwhy.com/f...
  • 通過上下左右鍵控制div的運行方向
    通過上下左右鍵控制div的運行方向:使用小鍵盤附近的上下左右鍵控制方向可能在很多應用程式中都有用到，有時候甚至特別的方便，比如有些游戲可以使用者四個鍵控制方位，下麵就簡單介紹一下javascript如何實現使用這四個鍵控制div的運動方向。方向鍵控制div的移動-螞蟻部落紅色方塊為鍵盤操作區域，您可...
  • 實現table細線表格效果代碼
    實現table細線表格效果代碼:細線表格相比較表格的預設表格來說要美觀很多，當然更受歡迎，下麵就通過代碼實例介紹一下如何實現此效果。代碼如下: 螞蟻部落 螞蟻部落一 螞蟻部落二 javascript教程 jQuery教程 ...
  • jQuery實現的垂直可伸縮導航菜單
    jQuery實現的垂直可伸縮導航菜單:垂直可伸縮導航菜單在網頁中非常的常用，首先可以進行分類，第二個也可以節省網頁的空間，本章節就通過實例代碼分享一個這樣的效果，希望能夠給需要者帶來一定的幫助。代碼實例如下:螞蟻部落 螞蟻部落一 前端教程 ...
  • javascript實現的iframe數據共用介面
    javascript實現的iframe數據共用介面:在iframe與父視窗或者與子視窗傳遞數據是一個麻煩的事情，如果我們能夠寫一個一勞永逸的介面那就再方便不過了，下麵就來簡答介紹一下如何實現此功能。原理就是將數據緩存早window.top這個視窗，這樣無論子視窗父視窗的層次如何變化，數據總是存在不會...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類