2019-02-19 css3结合js做3D旋转效果动画
修改角度可实现多个盒子旋转
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
html,
body {
width: 100%;
height: 100%;
margin: 0px
}
.gwd-page-container {
position: relative;
width: 100%;
height: 100%
}
.gwd-page-content {
background-color: transparent;
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-moz-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
perspective: 1400px;
-webkit-perspective: 1400px;
-moz-perspective: 1400px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
position: absolute
}
.gwd-page-wrapper {
background-color: #fff;
position: absolute;
transform: translateZ(0);
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0)
}
.gwd-page-size {
width: 160px;
height: 600px
}
.box {
display: block;
width: 160px
}
.box .big {
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
width: 160px;
height: 600px;
transition: 2s;
-webkit-transition: 2s;
-moz-transition: 2s
}
.box .big>div {
color: white;
position: absolute;
perspective: 1000px;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
width: 160px;
height: 600px;
transform-origin: center center 0px;
-webkit-transform-origin: center center 0px;
-moz-transform-origin: center center 0px
}
.red {
background: red;
transform: rotateY(0deg) translateZ(46px);
-webkit-transform: rotateY(0deg) translateZ(46px);
-moz-transform: rotateY(0deg) translateZ(46px)
}
.blue {
background:blue;
transform: rotateY(90deg) translateZ(46px);
-webkit-transform: rotateY(90deg) translateZ(46px);
-moz-transform: rotateY(90deg) translateZ(46px)
}
.green {
background: green;
transform: rotateY(180deg) translateZ(46px);
-webkit-transform: rotateY(180deg) translateZ(46px);
-moz-transform: rotateY(180deg) translateZ(46px)
}
.yellow{
color: red !important;
background: yellow;
transform: rotateY(270deg) translateZ(46px);
-webkit-transform: rotateY(270deg) translateZ(46px);
-moz-transform: rotateY(270deg) translateZ(46px)
}
</style>
</head>
<body>
<a class="box" href="http://web.tanzhouedu.com/index/weblm.html">
<div class="big" style="transform: rotateY(3840deg);">
<div class="red">1</div>
<div class="blue">2</div>
<div class="green">3</div>
<div class="yellow">4</div>
</div>
</a>
<script>
var big = document.querySelector('.box .big');
var t = 0;
setInterval(function() {
t += -90;
big.style.transform = `rotateY(${t}deg)`;
}, 3000);
</script>
</body>
</html>
