示例1(两面翻转的图片):
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两面翻转的图片</title>
<style>
div {
width: 224px;
height: 224px;
margin: 100px auto;
position: relative;
}
div img {
position: absolute;
top: 0;
left: 0;
transition: all 1s;
}
div img:first-child {
z-index: 1;
backface-visibility: hidden; /*不是正面对向屏幕,就隐藏*/
}
div:hover img {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div>
<img src="img/qian.svg" alt=""/>
<img src="img/hou.svg" alt=""/>
</div>
</body>
</html>
示例2(导航菜单3D):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D导航</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
/*取消ul的默认样式*/
list-style: none;
margin: 90px auto;
width: 800px;
}
ul li {
width: 120px;
height: 50px;
float: left;
position: relative;
/*设置子元素显示方式为3d*/
transform-style:preserve-3d;