CSS3旋轉3D正方形

阿新 • • 發佈：2019-01-20

最近學CSS3，利用它的3D特性做了個3D自動旋轉的正方形，剛學，程式碼有點亂，註釋就沒寫了。只做了webkit版的，FF,IE等就沒做了。希望大家路過程式碼有什麼不足提出來，我剛學不久，難免很多程式碼寫的不好。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3選擇3D正方形</title>
</head>
<style>
html,body,div,span,ul,li,ol,p,a{margin:0;padding:0;}
ul,li,ol{list-style:none;}
a{text-decoration:none;}
#container{margin:0 auto;width:500px; height:500px;border:1px #000 solid; background:#99F;position:relative;}
.cube{width:200px;height:200px;position:absolute; -webkit-perspective:10000; -webkit-transform-style:preserve-3d; top:150px;left:150px;-webkit-transform:rotateX(10deg) rotateY(10deg) rotateZ(10deg);-webkit-animation:cube 30s linear 0s infinite alternate;}
.cube li{width:200px;height:200px;color:#fff;font-size:36px;line-height:200px;text-align:center;font-weight:700;position:absolute;-webkit-transform-style:preserve-3d;}
.cube li:nth-child(1){background:#09F;-webkit-transform-origin: top; -webkit-transform:rotateX(90deg);}
.cube li:nth-child(2){background:#990;-webkit-transform-origin: right; -webkit-transform:rotateY(90deg);}
.cube li:nth-child(3){background:#3CC;-webkit-transform-origin: bottom; -webkit-transform:rotateX(-90deg);}
.cube li:nth-child(4){background:#C6F;-webkit-transform-origin: left;-webkit-transform:rotateY(-90deg);}
.cube li:nth-child(5){background:#CC3;-webkit-transform-origin:center; -webkit-transform:translateZ(200px)}
.cube li:nth-child(6){background:#F60;-webkit-transform-origin:center;}

@-webkit-keyframes cube{
0%{-webkit-transform:rotateY(10deg) rotateX(10deg) rotateZ(10deg);}
10%{-webkit-transform:rotateY(180deg)rotateX(10deg) rotateZ(10deg);}
25%{-webkit-transform:rotateY(360deg)rotateX(10deg) rotateZ(10deg);}
26%{-webkit-transform:rotateX(10deg) rotateY(10deg) rotateZ(10deg);}
40%{-webkit-transform:rotateX(180deg) rotateY(0deg) rotateZ(0deg);}
50%{-webkit-transform:rotateX(360deg) rotateY(0deg) rotateZ(0deg);}
51%{-webkit-transform:rotateZ(10deg) rotateY(10deg) rotateX(10deg);}
60%{-webkit-transform:rotateZ(180deg) rotateY(10deg) rotateX(10deg);}
75%{-webkit-transform:rotateZ(360deg) rotateY(10deg) rotateX(10deg);}
76%{-webkit-transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);}
100%{-webkit-transform:rotateX(10deg) rotateY(10deg) rotateZ(10deg);}
}
</style>
<body>
<div id="container">
	<ul class="cube">
    	<li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</div>
</body>
</html>

CSS3旋轉3D正方形

最近學CSS3，利用它的3D特性做了個3D自動旋轉的正方形，剛學，程式碼有點亂，註釋就沒寫了。只做了webkit版的，FF,IE等就沒做了。希望大家路過程式碼有什麼不足提出來，我剛學不久，難免很多程式碼寫的不好。 <!doctype html> <ht

基於css3的3D立方體旋轉特效（先translate與先rotate的不同）

3D變換基於幾個比較重要的屬性，perspective,translateZ,preserve-3d; 格式：舞臺(perspective) 容器(3D, preserve-3d) 內容 3D實現立方體盒子： transform的4

CSS3實現3D旋轉選單導航

一、效果圖二、程式碼 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>製作3D旋轉導航<

使用css3制作正方形、三角形、扇形和餅狀圖

radi spa over pointer tran ima 得到 lin 引入 1.利用邊框制作正方形如果將盒容器的width和height設置為0，並為每條邊設置一個較粗的width值和彼此不同的顏色，最終會得到四個被拼接在一起三角形，它們分別指向不同的顏色。 htm

css3旋轉立方體-_-

mov relative gin 不讓 anim type ext 保留 origin <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

CSS3 Tranform 3D 的應用

ase strong display hid tez /word 視圖位置查看 CSS3 Tranform 3D 的應用一、perspective 屬性 1. 作用：設置元素被查看位置的視圖，類似於眼睛到屏幕的距離，一般跟 perspective-origin 共同

050602課堂css3旋轉、過渡、動畫

from == width ansi charset html idt ani nim <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

css3製作3D立體模型

程式碼跟註釋都在裡面了！想知道是什麼效果不妨自己試試！ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> &l

CSS3之3D變形，實現大海波濤

animation:動畫名稱花費時間運動曲線何時開始播放次數是否反方向; @keyframes 動畫名稱 { from{ 開始位置 } 0% to{ 結束 } 100% } 實現程式碼： <!DOCTYPE html> <html> <head&

CSS3通過3D變換實現20面立體形狀

宣告：本來想做一個多面體相簿的，但是在網上沒有找到例子，最終完整程式碼是在一個英文程式網站上copy的，但是沒有解釋，我把大體實現流程解釋了一遍，旋轉真的是繞蒙我了···· 程式碼： <!DOCTYPE html> <html> <head> <t

css3實現3d焦點圖

css3實現3d焦點圖在之前寫的焦點圖的基礎上新增3d效果要點：1、perspective新增透視效果 2、計算滑鼠位置 <div class="border-3d-wrap"> <div class="wrap" onclick=

CSS3實現3d、過渡、變化案例

一開始盒子狀態：過渡過程：最終形式：大盒子旋轉180deg，小盒子跟著大盒子旋轉然後展開。程式碼實現 body模組： <body> <div class="stage"> <div clas

CSS3----旋轉圖片

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>旋轉圖片</title> &

CSS3實現3D透明立體盒子

想要利用CSS3實現透明3D立體盒子就要清楚立方體是由六個面組成，分上下左右和前後，考慮這些可以幫助我們更好的融入CSS3的程式碼因此我設定了6個div，作為立方體的6個面因為定位的原因，一開始所有的盒子都是面對著螢幕這面的，因此要賦予每個面不一樣的值，即不一樣的

button 元素的css3旋轉動畫

html：利用偽元素 <button class="btn btn-default btn-lg btn-3d" type="submit" data-hover="SUBMIT REQUEST" ">SUBMIT REQUEST ::before "SUBMIT REQUEST"

強制橫屏利用 CSS3 旋轉對根容器逆時針旋轉 90 度

var detectOrient = function() { var width = document.documentElement.clientWidth, height = document.documentElement.clientHeight,

css3 旋轉屬性用法

transition、transform 等css3屬性用法，如果掌握的好，使用起來能夠遊刃有餘，相信使用者體驗什麼的應該也不會差！具體頁面效果可看頁面右側的“打醬油的，各種路過”模組。沒錯！加這個效果上去，就是要把這些傢伙全部曝光，讓你們打醬油...

css3旋轉立方體

CSS3 旋轉立方體的製作 transform 旋轉 div 元素 transform 屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。 perspective屬性該屬性用來啟用一個3D空間。當為元素定義perspect

css3 -preserve-3d案例

程式碼： html <div class="flipper"> <span class="flipper-object flipper-vertical"> <span class="panel front">The Front

純CSS3實現3D跳動小球

1  2 <style t

CSS3旋轉3D正方形

相關推薦