HTML5可以很方便地設(shè)置li元素的變形，這為設(shè)計師和開發(fā)人員提供了更多的創(chuàng)意空間，可以讓網(wǎng)頁更加生動有趣。下面我們就來了解一下如何利用HTML5設(shè)置li變形。 使用HTML5設(shè)置li元素變形需要借助CSS3中的變形（transform）屬性，而且要注意支持性。下面我們來看一個實例，先放出代碼：

<style>ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}
li {
width: 100px;
height: 80px;
border-radius: 10px;
background-color: gray;
margin-right: 10px;
color: #fff;
font-size: 18px;
text-align: center;
line-height: 80px;
cursor: pointer;
transform: rotateY(0) scale(1);
transition: all 0.5s ease;
}
li:hover {
transform: rotateY(180deg) scale(1.1);
}
</style><ul><li>一</li><li>二</li><li>三</li><li>四</li></ul>

上述代碼的效果是鼠標懸停在li元素上時，該元素沿Y軸旋轉(zhuǎn)180度，并稍微放大一些。這其中，我們用到了CSS3中的Transform屬性的兩個值，rotateY和scale，配合transition的過渡效果。同時，還需要注意下面這句代碼的作用：

display: flex;

這是采用了Flex布局，實現(xiàn)了水平居中和等分居中。這個也可以用其他方式實現(xiàn)。 值得注意的是，在使用Transform屬性時，要考慮到不同瀏覽器的支持情況。目前，Transform屬性在絕大多數(shù)現(xiàn)代瀏覽器中都得到支持，但是在IE8及以下版本中并不支持，需要使用瀏覽器前綴。 以上就是關(guān)于設(shè)置li元素變形的HTML5代碼，希望對你有所幫助。