如何使用純CSS實現(xiàn)3D
這篇“如何使用純CSS實現(xiàn)3D”文章，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要參考一下，對于“如何使用純CSS實現(xiàn)3D”，小編整理了以下知識點，請大家跟著小編的步伐一步一步的慢慢理解，接下來就讓我們進入主題吧。
網(wǎng)站建設哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、小程序定制開發(fā)、集團企業(yè)網(wǎng)站建設等服務項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了高淳免費建站歡迎大家使用！
一、正方體
我認為正方體可以算是3D圖像的基礎吧，首先正方體是由六個相同的面所組成，其次就需要我們依次構造。（據(jù)體構造在代碼中）
代碼如下：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>正方體</title>
<style>
.d3{
height:300px;
width:300px;
perspective:800px;
margin:140pxauto;
border:1pxsolid#ccc;}
.stage{
height:300px;
width:300px;
transform-style:preserve-3d;
position:relative;
transform:rotateX(45deg)rotateY(45deg);
}
.role{
height:300px;
width:300px;
position:absolute;
}
.stage{
animation:dong3slinearinfinite;（這是舞臺）
}
.stage:hover{
animation:paused;
}
@keyframesdong{（這是使舞臺旋轉(zhuǎn)的動畫）
from{
transform:rotateX(45deg)rotateY(45deg);
}
to{
transform:rotateX(405deg)rotateY(405deg);
}
}
.di1{（正方體的前面）
background:rgb(21,163,52);
transform:translateZ(150px);（沿著z軸向前移動150px）
font-size:100px;
font-family:KaiTi;
text-align:center;
line-height:300px;
}
.di2{（正方體的后面）
background:blue;
transform:translateZ(-150px)rotateY(180deg);（沿著z軸向前移動150px然后沿著y軸旋轉(zhuǎn)180°*注意順序哦是先移動后旋轉(zhuǎn)）
font-size:100px;
font-family:KaiTi;
text-align:center;
line-height:300px;
}
.di3{（正方體的左面）
background:purple;
transform:rotateY(-90deg)translateZ(150px);
font-size:100px;
font-family:KaiTi;
text-align:center;
line-height:300px;
}
.di4{（正方體的右面）
background:pink;
transform:rotateY(90deg)translateZ(150px);
font-size:100px;
font-family:KaiTi;
text-align:center;
line-height:300px;
}
.di5{（正方體的上面）
background:red;
transform:rotateX(90deg)translateZ(150px);
font-size:100px;
font-family:KaiTi;
text-align:center;
line-height:300px;
}
.di6{（正方體的下面）
background:yellow;
transform:rotateX(-90deg)translateZ(150px);
font-size:100px;
font-family:KaiTi;
text-align:center;
line-height:300px;
}
</style>
</head>
<body>
<div>
<div>
（將正方體分為六個相同的面）
<divclass="roledi1">前</div>
<divclass="roledi2">后</div>
<divclass="roledi3">左</div>
<divclass="roledi4">右</div>
<divclass="roledi5">上</div>
<divclass="roledi6">下</div>
</div>
</div>
</body>
</html>
二、動態(tài)立體圖片冊
將圖片冊設計成立體3D的效果
利用旋轉(zhuǎn)、移動、傾斜和3D效果讓你的圖冊更加漂亮。
代碼如下：
（將第一張定好位置后將后面的依次排列）
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>事例一</title>
<style>
body{
height:100vh;
}
.div{
height:500px;
width:800px;
perspective:800px;
margin:50pxauto;
}
.div1{
height:500px;
width:800px;
transform-style:preserve-3d;
position:relative;
/*transform:rotateY(-10deg);*/
}
.div_0{
height:400px;
width:600px;
position:absolute;
margin-top:110px;
margin-left:50px;
}
.div_1{
height:400px;
width:600px;
background:url(../day03/timg.jpg);
background-size:600px400px;
border-radius:20px;
transform-origin:rightbottom;
transition:3s;
}
.div_2{
background:url(../day03/timg1.jpg);
border-radius:20px;
background-size:600px400px;
transform-origin:rightbottom;
transform:rotateZ(2deg)translateZ(-20px)translateX(20px)translateY(-20px);
}
.div_2:hover{
transform:rotateZ(0)translateZ(0)translateX(0)translateY(0);
transition:1s;
}
.div_2:hover~.div_1{
/*transform-origin:rightbottom;*/
transform:rotateZ(2deg)translateZ(20px)translateX(20px)translateY(-20px);
transition:1s;
}
/*body:hover.div_1{
opacity:0;
transition:3s;
}*/
.div_3{
background:url(timg2.jpg);
border-radius:20px;
background-size:600px400px;
transform-origin:rightbottom;
transform:rotateZ(4deg)translateZ(-40px)translateX(40px)translateY(-40px);
}
.div_3:hover{
transform:rotateZ(0)translateZ(0)translateX(0)translateY(0);
transition:1s;
}
.div_4{
background:url(timg4.jpg);
border-radius:20px;
background-size:600px400px;
transform-origin:rightbottom;
transform:rotateZ(6deg)translateZ(-60px)translateX(60px)translateY(-60px);
}
.div_4:hover{
transform:rotateZ(0)translateZ(0)translateX(0)translateY(0);
transition:1s;
}
.div_5{
background:url(timg5.jpg);
border-radius:20px;
background-size:600px400px;
transform-origin:rightbottom;
transform:rotateZ(8deg)translateZ(-80px)translateX(80px)translateY(-80px);
}
.div_5:hover{
transform:rotateZ(0)translateZ(0)translateX(0)translateY(0);
transition:1s;
}
.div_6{
background:url(timg3.jpg)no-repeat;
border-radius:20px;
background-size:600px400px;
transform-origin:rightbottom;
transform:rotateZ(10deg)translateZ(-100px)translateX(100px)translateY(-100px);
}
.div_6:hover{
transform:rotateZ(0)translateZ(0)translateX(0)translateY(0);
transition:1s;
}
</style>
</head>
<body>
<div>
<div>
<divclass="div_0div_1"></div>
<divclass="div_0div_2"></div>
<divclass="div_0div_3"></div>
<divclass="div_0div_4"></div>
<divclass="div_0div_5"></div>
<divclass="div_0div_6"></div>
</div>
</div>
</body>
</html>
三、平面的星空
代碼如下：
（由于沒有用js所以只有平面的效果了
你掌握好旋轉(zhuǎn)的中心點就很容易了）
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>太陽系</title>
<style>
body{
background:url(timg01.jpg)no-repeat;
background-size:100%;
}
.box1{
height:600px;
width:600px;
margin:0auto;
border:1pxsolid#ccc;
border-radius:50%;
}
.box1_0{
height:100px;
width:100px;
margin:0auto;
border:1pxsolidwhite;
border-radius:50%;
position:absolute;
top:calc(50%-59px);
left:322px;
transform-origin:345.5px;
animation:dong25slinearinfinite4s;
}
@keyframesdong2{
from{
transform:rotate(0)
}
100%{
transform:rotate(360deg);
}
}
.box1_2{
height:13px;
width:13px;
margin:0auto;
/*border:1pxsolid#ccc;*/
border-radius:50%;
background:white;
position:absolute;
top:calc(50%-7.5px);
left:96px;
transform-origin:-45px;
animation:dong35.5slinearinfinite;
/*animation-iteration-count:200;*/
}
@keyframesdong3{
from{
transform:rotate(0);
}
100%{
transform:rotate(360deg);
}
}
.box1_1{
height:15px;
width:15px;
margin:0auto;
/*border:1pxsolid#ccc;*/
border-radius:50%;
background:rgb(7,100,223);
position:absolute;
top:45px;
left:calc(50%-16.5px);
}
.box2{
height:400px;
width:400px;
margin:0auto;
border:1pxsolid#ccc;
border-radius:50%;
position:absolute;
top:calc(50%-200px);
left:calc(50%-200px);
}
.box2_1{
height:15px;
width:15px;
margin:0auto;
/*border:1pxsolid#ccc;*/
border-radius:50%;
background:rgb(198,208,221);
position:absolute;
top:calc(50%-7.5px);
left:43px;
transform-origin:157.5px;
animation:dong15slinearinfinite.5s;
}
@keyframesdong1{
from{
transform:rotate(0)
}
100%{
transform:rotate(360deg);
}
}
.box2_2{
height:15px;
width:15px;
margin:0auto;
border-radius:50%;
background:#644e11;
position:absolute;
top:calc(50%-7.5px);
left:-7px;
transform-origin:207.5px;
animation:dong5slinearinfinite;
}
@keyframesdong{
from{
transform:rotate(0)
}
100%{
transform:rotate(360deg);
}
}
.box3{
height:300px;
width:300px;
margin:0auto;
border:1pxsolid#ccc;
border-radius:50%;
position:absolute;
top:calc(50%-150px);
left:calc(50%-150px);
}
.box4{
height:30px;
width:30px;
margin:0auto;
border-radius:50%;
background:orange;
position:absolute;
top:calc(50%-15px);
left:calc(50%-15px);
}
.boxli{
height:900px;
width:900px;
margin:0auto;
border:1pxsolid#ccc;
border-radius:50%;
position:absolute;
top:-120px;
left:calc(50%-450px);
}
.boxli_1{
height:15px;
width:15px;
margin:0auto;
border-radius:50%;
background:rgb(116,100,56);
position:absolute;
top:500px;
left:-6px;
transform-origin:455.5px-38px;
animation:dongli5slinearinfinite;
}
@keyframesdongli{
from{
transform:rotate(0)
}
100%{
transform:rotate(360deg);
}
}
</style>
</head>
<body>
<divclass="box1">
<divclass="box1_0">
<divclass="box1_2"></div>
<divclass="box1_1"></div>
</div>
<divclass="box2">
<divclass="box2_1"></div>
<divclass="box2_2"></div>
<divclass="box3">
<divclass="box4"></div>
</div>
</div>
</div>
<divclass="boxli">
<divclass="boxli_1"></div>
</div>
</body>
</html>
css的基本語法是什么
css的基本語法是：1、css規(guī)則由選擇器和一條或多條聲明兩個部分構成；2、選擇器通常是需要改變樣式的HTML元素；3、每條聲明由一個屬性和一個值組成；4、屬性和屬性值被冒號分隔開。
以上是“如何使用純CSS實現(xiàn)3D”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
本文標題：如何使用純CSS實現(xiàn)3D
文章來源：http://www.rwnh.cn/article40/jeecho.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、網(wǎng)站導航、移動網(wǎng)站建設、虛擬主機、、搜索引擎優(yōu)化
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
- 上海網(wǎng)站建設，將商品知名度大大提高 2020-06-06
- 2019年及未來應重視并掌握的網(wǎng)站建設技術分析 2019-05-22
- 成都網(wǎng)站建設中小企業(yè)建設一個營銷型的網(wǎng)站 2016-10-05
- 營銷型網(wǎng)站建設的三點新定義 2013-06-18
- 成都我的網(wǎng)站建設學習和什么是網(wǎng)站建設 2023-03-06
- 網(wǎng)站建設交互性與持續(xù)性介紹 2022-06-21
- 網(wǎng)站建設中的文字內(nèi)容規(guī)范及準確性問題分析 2016-11-03
- 網(wǎng)站建設應嚴格控制項目進度并做到又快又好 2022-05-23
- 創(chuàng)新互聯(lián)網(wǎng)站建設公司說優(yōu)化需要哪幾個步驟? 2022-07-14
- 網(wǎng)站建設談建網(wǎng)站要做一個很貼心的網(wǎng)站 2021-07-28
- 【成都網(wǎng)站設計】R語言為Hadoop集群數(shù)據(jù)統(tǒng)計分析帶來革命性變化-網(wǎng)站建設 2022-07-11
- 網(wǎng)站建設上線之后應該如何保持站點的活躍度以及注意事項 2016-10-21