backface.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>backface</title>
<style type="text/css">
/*
backface-visibility:
visible：默认值，旋转的时候背景可见。
hidden：旋转的时候背景不可见。*/
*{
padding: 0;
margin: 0;
}
section{
-webkit-perspective:800px;
}
.box{
width: 400px;
height: 400px;
/*overflow: hidden; 只会出来一张*/
-webkit-transform-style: preserve-3d;
/*
子元素保持3D位置，让其 可以 空间内旋转，位移
*/
margin: 0 auto;
position: relative;
transition: 1.5s all ease;
}
img{
position: absolute;
width: 400px;
height: 400px;
border-radius: 50%;
}
img:nth-child(1){
/*transform: rotateY(180deg);*/
}
img:nth-child(2){
transform: rotateY(180deg) translateZ(50px);
}
div:hover{
transform:rotateY(180deg);
}
</style>
</head>
<body>
<section>
<div class="box">
</div>
</section>
</body>
</html>
网友评论