<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html,body{
height: 100%;
}
body{
/*透视点*/
/*设置一个位置观察运动*/
/* 放在父级*/
perspective:1000px;
/* trfs */
/* 开启3d模式，给父级加开启 */
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
div{
width: 200px;
height: 200px;
background: red;
position: absolute;
top:50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
font-size: 20px;
/*overflow: scroll;*/
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
div:hover{
/* 沿z轴平移 */
/*-webkit-transform: translateZ(999px);
-ms-transform: translateZ(999px);
-o-transform: translateZ(999px);
transform: translateZ(999px);*/
/* 两个运动共同执行，中间用空格隔开 */
/* 运动是有先后顺序的 */
-webkit-transform: translateZ(500px) rotateY(360deg) ;
-ms-transform: translateZ(500px) rotateY(360deg) ;
-o-transform: translateZ(500px) rotateY(180deg) ;
transform: translateZ(500px) rotateY(360deg) ;
/*-webkit-transform: rotateX(360deg) translateX(500px);
-ms-transform: rotateX(360deg) translateX(500px);
-o-transform: rotateX(360deg) translateX(500px);
transform: rotateX(360deg) translateX(500px);*/
/* bv */
/* 背面是否可见 */
-webkit-backface-visibility: visible;
-moz-backface-visibility: visible;
-ms-backface-visibility: visible;
backface-visibility: visible;
/* -webkit-transform: scale(3,4);
-ms-transform: scale(3,4);
-o-transform: scale(3,4);
transform: scale(3,4);*/
}
</style>
</head>
<body>
<div>旋转跳跃 我闭着眼</div>
</body>
</html>
3286
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
