CSS3 实现3D旋转木马

最新推荐文章于 2024-04-01 07:40:23 发布

weixin_30633507

最新推荐文章于 2024-04-01 07:40:23 发布

阅读量171

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/cquptzy/p/7610207.html

版权

一、transform: rotateX() rotateY()

先要将图片进行旋转。

rotateX(30deg)变成了

有点难理解。附上几何图(侧面视角)：

rotateY(30deg):

同样的道理，几何图（顶部视角）：

然后就可以将图片进行旋转，准备了8张图片需要旋转的角度为（360/8 = 45deg）。

		<style type="text/css">
			._container{width: 300px;height: 150px;margin: 0 auto;}
			img{width: 300px;height: 150px;position: absolute;cursor: pointer;}
			img:nth-child(1){transform: rotateY(0deg);}
			img:nth-child(2){transform: rotateY(45deg);}
			img:nth-child(3){transform: rotateY(90deg);}
			img:nth-child(4){transform: rotateY(135deg);}
			img:nth-child(5){transform: rotateY(180deg);}
			img:nth-child(6){ransform: rotateY(225deg);}
			img:nth-child(7){transform: rotateY(270deg);}
			img:nth-child(8){transform: rotateY(315deg);}
		</style>
	<body>
		<div class="_container">
			<img src="img/rotate_translate1.jpg"/>
			<img src="img/rotate_translate2.jpg"/>
			<img src="img/rotate_translate3.jpg"/>
			<img src="img/rotate_translate4.jpg"/>
			<img src="img/rotate_translate5.jpg"/>
			<img src="img/rotate_translate6.jpg"/>
			<img src="img/rotate_translate7.jpg"/>
			<img src="img/rotate_translate8.jpg"/>
		</div>
	</body>

= =接着我们发现图片都堆成一堆

二、transform-style: preserve-3d;

由于图片堆在了一起我们给他加个transform-style: preserve-3d;

这样图片将以3d视角展示

._container{width: 300px;height: 150px;margin: 0px auto;transform-style: preserve-3d; }

效果图：

额.......图片都黏在一起了。

三、transform: translateZ()

这是tranlate的正负值图。因此我们需要将图片都沿着Z轴方向平移一定长度。

注意：这里的translate坐标为图片坐标，因此当图片rotate的时候，坐标也跟着rotate,所以可以将img的tranlateZ都置为相同的值

这样的话所有图片都离远点的Z方向是相同的。

算出了translateZ的值约等于482.86px

img:nth-child(1){transform: rotateY(0deg) translateZ(482.86px); }
img:nth-child(2){transform: rotateY(45deg) translateZ(482.86px); }
img:nth-child(3){transform: rotateY(90deg) translateZ(482.86px); }
img:nth-child(4){transform: rotateY(135deg) translateZ(482.86px); }
img:nth-child(5){transform: rotateY(180deg) translateZ(482.86px); }
img:nth-child(6){transform: rotateY(225deg) translateZ(482.86px); }
img:nth-child(7){transform: rotateY(270deg) translateZ(482.86px); }
img:nth-child(8){transform: rotateY(315deg) translateZ(482.86px); }

　效果图：

有人说看过去怎么跟2d一样。博主你在逗我么？其实已经是3d视角了。只是我们是从正面看过的。即几何模型的主视图。

我们可以将容器_container向前旋转10deg即（rotateX(-10deg)）.

._container{width: 300px;height: 150px;margin: 100px auto;transform-style: preserve-3d;transform: rotateX(-10deg); }

结果图：

有点样子出来了。

四、perspective

这个是个好东西。

为什么有些图看过去像3d图呢？

就好比一个正方体在你的面前。当你的视角慢慢的从0~远离。你看到的正方体会从原来0视角的正方形慢慢的变成正方体。

perspective干的事就是讲我们距离屏幕一定视角的图片成现在显示器中

所以我们假设perspective:3000px；

就是我们眼睛距离屏幕3000px时观看到的效果。呈现在显示器中。

效果图：

那么问题来了,这个perspective是加在哪个位置呢？

假设我们加在container上面，那么我们的图片开始转动的时候（即转动container==>raotateY()）

那么我们的视角和上面说的translate的坐标一样会随的图片的转动而变化。

然后出现奇葩的图片。

因此我们需要在container外面加一个box给box加视角perspective。

即

.box{perspective: 3000px;}
<div class="box">
        <div class="container">
          ...
        </div>
</div>

这样弄的话视角就永远不会变动，因为转动的是container。

五、perspective-origin

可能有的人想把外层box设个宽度或者高度什么的。

所以就要设计3d基点设置（perspective-origin）。

前面说perspective视角是屏幕前的位置。现在perspective-origin则为在屏幕内的哪个位置。

即你在正方体前面的500px的位置绕着正方体不同的角度看过去效果也会不同。

这里的3d基点则制定正向位置点。

效果图：

原始基点为：默认perspective-origin: 50% 50%;

然后就可以设置些js来让图片滚动了。

六、代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            ._area{
                height:250px;
                width: 1200px;
                perspective: 3000px;
                perspective-origin: 599px 146px;
                margin: 0 auto;
                padding-top: 100px;
            }
            .box{
                height: 150px;
                width: 300px;
                transform: rotateX(-8deg);
                transform-style: preserve-3d;
                transition-duration: 1s;
                margin: 0 auto;
            }
            img{
                width: 300px;
                height: 150px;
                position: absolute;
                cursor: pointer;
            }
            img:nth-child(1){
                transform: rotateY(0deg) translateZ(400px);
                
            }
            img:nth-child(2){
                transform: rotateY(45deg) translateZ(400px);
            }
            img:nth-child(3){
                transform: rotateY(90deg) translateZ(400px);
            }
            img:nth-child(4){
                transform: rotateY(135deg) translateZ(400px);
            }
            img:nth-child(5){
                transform: rotateY(180deg) translateZ(400px);
            }
            img:nth-child(6){
                transform: rotateY(225deg) translateZ(400px);
            }
            img:nth-child(7){
                transform: rotateY(270deg) translateZ(400px);
            }
            img:nth-child(8){
                transform: rotateY(315deg) translateZ(400px);
            }
            ul{
                list-style: none;
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);                
            }
            li{
                background-color: #000;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                float: left;
                margin-left: 5px;
                cursor: pointer;
            }
</style>    
    </head>
    <body>
        <div class="_area">
            <div class="box">
                <img src="img/rotate_translate1.jpg"/>
                <img src="img/rotate_translate2.jpg"/>
                <img src="img/rotate_translate3.jpg"/>
                <img src="img/rotate_translate4.jpg"/>
                <img src="img/rotate_translate5.jpg"/>
                <img src="img/rotate_translate6.jpg"/>
                <img src="img/rotate_translate7.jpg"/>
                <img src="img/rotate_translate8.jpg"/>
            </div>
            <ul>
                <li style="background-color: #666;"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        
    </body>
    <script type="text/javascript">        
        var x = 0;
        var index = 0;
        var timer;
        var box = document.getElementsByClassName("box")[0];
        var li = document.getElementsByTagName("ul")[0].getElementsByTagName("li");
        //滚动函数
        function roll(){
            x  =x - 45;
            index = (index == 7)?0:(index+1);
            for(var i=0;i<li.length;i++){
                li[i].style.backgroundColor = "#000";
            }
            li[index].style.backgroundColor = "#666";
            box.style.transform = "rotateX(-8deg) rotateY("+x+"deg)";                
        }
        
        //切换页面的时候调用(切换页面时本页面还在计时,防止切换页面回来时瞬间快速滚动。)
        var hiddenProperty = 'hidden' in document ? 'hidden' :    
            'webkitHidden' in document ? 'webkitHidden' :    
            'mozHidden' in document ? 'mozHidden' :    
            null;
        var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
        //替换hiddenProperty中的hidden(忽略大小写即Hidden也会被替换形成webkitvisibilitychange)
        var onVisibilityChange = function(){
            if (!document[hiddenProperty]) {
                timer = setInterval(roll,2000);
            }else{
                
                clearInterval(timer);
            }
        }
        document.addEventListener(visibilityChangeEvent,onVisibilityChange);
        
        //点击图片滚动
        box.onclick = function(){
            clearInterval(timer);
            roll();
            setTimeout(function(){
                clearInterval(timer);
                timer = setInterval(roll,2000);
            },2000);
        }
        timer = setInterval(roll,2000);
        
        //点击小圆点滚动
        for(var i =0;i<li.length;i++){
            li[i].xuhao = i;
            
            li[i].onclick = function(){    
            clearInterval(timer);
                for(var i=0;i<li.length;i++){
                    li[i].style.backgroundColor = "#000";
                }
            li[this.xuhao].style.backgroundColor = "#666";
            x = x+(index-this.xuhao)*45;
            box.style.transform = "rotateX(-8deg) rotateY("+x+"deg)";
            index = this.xuhao;
            setTimeout(function(){
                clearInterval(timer);
                timer = setInterval(roll,2000);
            },2000);
            }            
        }
    </script>
</html>

效果图：

七、兼容性

尽管perspective支持IE10

transform-style支持不了IE。所以只能跟IE say goodbye.

chrome	firefox	IE
√	√	×

转载于:https://www.cnblogs.com/cquptzy/p/7610207.html

weixin_30633507

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 实现3D旋转木马

一、transform: rotateX() rotateY()先要将图片进行旋转。rotateX(30deg)变成了有点难理解。附上几何图(侧面视角)：rotateY(30deg):同样的道理，几何图（顶部视角）：然后就可以将图片进行旋转，准备了8张图片需要旋转的角度为（360/8 = 45deg）。 <s...
复制链接

扫一扫