Home > Article > Web Front-end > Steps to implement 3D suspension effect in HTML
Steps to implement 3D suspension effect in HTML
- php中世界最好的语言Original
- 2017-11-29 14:56:353341browse
To achieve the 3d suspension effect, you need to use the new attributes of H5. How to achieve the 3d suspension effect? What are the precautions to achieve the 3D suspension effect? The following is a practical case, let’s take a look.
<!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>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<script>
var list=document.querySelector('.boxList');
window.onload=function(){
setInterval(transition,1000)
}
function transition(){
list.className='on boxList';
}
</script>
</html>I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!
Related reading:
How to use CSS to create image rotation effects
Solution to the problem that the background color cannot be displayed in HTML
Js process of operating DOM objects
The above is the detailed content of Steps to implement 3D suspension effect in HTML. For more information, please follow other related articles on the PHP Chinese website!