为了账号安全,请及时绑定邮箱和手机立即绑定
关注
五趾的鱼

我这为啥就不对了 那个还不翻转????


<!DOCTYPE HTML>

<html>

<html>

<head>

<meta charset="UTF-8">

    <title>3D</title>

</head>

<style type="text/css">

  *{

     margin:0px;

padding:0px;

}

.light{

    

    margin-left:200px;

    margin-top:200px;

    width:310px;

    height:100px;

    position:absolute;

perspective:500px;

}


.light .stage{

    

    position:relative;

    width:310px;

    height:100px;

    transform-style:perserve-3d;

    -webkit-transition: all 0.6s;

     }

 

.light .stage .image1{

    width:310px;

height:100px;

background:red;

position:absolute;

-webkit-transform:translateZ(50px);

-webkit-transition: all 0.6s;

}


.light .stage .image2{

    width:310px;

    height:100px;

    background:black;

    position:absolute;

-webkit-transition: all 0.6s;

    -webkit-transform: rotateX(-90deg) translateZ(50px) ;

    

    }

 

.light .stage:hover{

    -webkit-transform: rotateX(90deg);

}

     

 

 

</style>

<body>

<div class="light">

    <div class="stage">

          <div class="image1">1</div> 

    

          <div class="image2">2</div> 

   </div>  

</div>



</body>

</html>



2017-07-11 源自:CSS3 3D 特效 581 浏览 0 回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信