關(guān)于HTML 三d墓碑代碼
HTML作為一種標(biāo)記語言，能夠創(chuàng)建出許多不同的效果。其中包括三維效果，也就是3D。下面將介紹一種創(chuàng)建3D墓碑的HTML代碼，讓你了解如何創(chuàng)建出令人驚嘆的效果。
首先我們需要寫一個容器的標(biāo)簽，比如div，然后再寫一個pre標(biāo)簽，將下面的代碼復(fù)制到pre標(biāo)簽中。
```html
```
看到這些div標(biāo)簽后，有沒有覺得有些暈眩？沒關(guān)系，接下來會一一講解。
代碼中的div標(biāo)簽都是墓碑不同部位下的子元素。其中，top代表墓碑的頂部，front代表正面，left代表左側(cè)，right代表右側(cè)，back代表背面，bottom代表底部。
接下來，我們需要為墓碑定制樣式，讓它能夠呈現(xiàn)出3D的效果。下面就是相應(yīng)的CSS樣式。
```css
.tombstone {
position: relative;
width: 125px;
height: 250px;
margin: 50px auto;
transform-style: preserve-3d;
transform: rotateX(40deg) rotateY(45deg);
}
.tombstone >div {
position: absolute;
width: 100%;
height: 100%;
box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 6px;
}
.top {
background: url('https://i.imgur.com/0HbdT.jpg') 50% 50% no-repeat;
transform: rotateX(90deg) translateZ(-62.5px);
}
.front {
background: #BDBDBD;
transform: translateZ(62.5px);
}
.left {
background: #8E8E8E;
transform: rotateY(-90deg) translateZ(62.5px) translateX(-62.5px);
}
.right {
background: #C5C5C5;
transform: rotateY(90deg) translateZ(62.5px) translateX(62.5px);
}
.back {
background: #EBEBEB;
transform: rotateY(180deg) translateZ(62.5px);
}
.bottom {
background: #A4A4A4;
transform: rotateX(-90deg) translateZ(-62.5px);
}
```
上述代碼中，設(shè)置了樣式文件的位置，width和height為墓碑的寬度和高度。用margin:auto來讓墓碑在頁面中居中。
.transform-style: preserve-3d設(shè)置3D顯示，讓墓碑呈現(xiàn)3D的效果。
接下來是每一個墓碑部位的樣式，通過不同的角度和位置來控制3D效果。
現(xiàn)在，墓碑3D效果已經(jīng)實現(xiàn)，請嘗試你的代碼吧！
通過上述代碼，你已經(jīng)學(xué)習(xí)了如何使用HTML和CSS來創(chuàng)建一個3D的效果。你可以用它來實現(xiàn)其他不同的3D效果。一些CSS屬性，如transform、rotateX和rotateY等，可以幫助你實現(xiàn)3D效果。
下一篇css3 動畫定格