利用html5新属性实现3d悬浮效果

2019-09-13 郑州网站建设  

<!DOCTYPE html>

<html>

         <head>

                   <meta charset="UTF-8">

                   <title></title>

                   <style>

                            *{margin: 0; padding: 0;}

                            ul,li{list-style: none;}

                            .container{perspective: 1300;-webkit-perspective:1300;}

                            .boxList{position:absolute;width: 630px;height:630px;left:50%;margin-left:-315px; -webkit-transform-style: preserve-3d;transform-style: preserve-3d;/*animation: a1 2s 1;*/transition: all 2s;}

                            .boxList li{float: left;width: 200px;height: 200px;margin:5px;background: darkcyan;-webkit-transition: all 0.3s;transition: all 0.3s;}

                            .on li:hover{-webkit-transform: translate3d(0,0,30px);transform: translate3d(0,0,30px);background:deepskyblue;box-shadow: 30px 30px 10px rgba(0, 0, 0, 0.5);}

                            .on{webkit-transform: rotateX(75deg) rotateY(0deg) rotateZ(45deg);transform: rotateX(75deg) rotateY(0deg) rotateZ(45deg);}

                   </style>

         </head>

         <body>

                   <div class="container">

                            <ul class="boxList">

                                     <li></li>

                                     <li></li>

                                     <li></li>

                                     <li></li>

                                     <li></li>

                                     <li></li>


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/2128.html转载请标明出处,谢谢合作!
标签:
  • HTML
  • Doctype
  • !
  • Ч
  • html53D