您的位置：首页 > Web前端 > CSS

CSS3 3D变换

2016-09-12 09:11 302 查看
  CSS3 3D变换

使用3D变换时要加上内核（-ms-：IE内核 / -webkit-:Safari
和 Chrome内核 /  -moz- :Firefox 内核 / -o-: Opera
内核）

使用3D变换 步骤：

1.transform-style:preserve-3d    // 建立3D空间

2. 设置景深  perspective:100px;  // 有近大远小的感觉  ,距离我看他的地方
 示例：

.box{width:100px;height:100px;padding:100px;border:5px solid #000;margin:30px auto;-webkit-transform-style:preserve-3d;-webkit-perspective:100px; }  //  建立3D空间 ，设置景深

.div1{width:100px;height:100px;background:red;transition:1s;}   // 加个过渡

.box:hover .div1{-webkit-transform:rotateX(180deg)} // X轴旋转180度


3.perspective-origin   设置景深的基点  就是你站在什么方位去看这盒子
示例：

-webkit-perspective-origin:left top   // 左上角观看


transform 下新增函数
 1.rotateX(180deg)
   -->>   X轴旋转
 2.rotateY(180deg)     -->>
Y轴旋转
 3.rotateZ(180deg)      -->> Z轴旋转
   Z轴就是电脑屏幕的
 4.translateZ(100px)    -->> Z轴的移动 (离自己近感觉变大了，离自己远感觉变小了)可以是负值，和景深的值一起调试
 5.scaleZ()         -->>
示例：旋转的盒子

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset="UTF-8">

<style>

.wrap{width:100px;height:100px;padding:100px;border:5px solid #000;margin:100px auto;-webkit-perspective:200px;/*-webkit-perspective-origin:left top */}

.box{width:100px;height:100px;background:red;position:relative;-webkit-transform-style:preserve-3d;transition:2s;-webkit-transform-origin:center center -50px;}

.box div{width:100px;height:100px;position:absolute;font-size:50px;text-align:center;line-height:100px;}

.box div:nth-of-type(1){background:#9c0;left:0;top:-100px;-webkit-transform-origin:bottom;-webkit-transform:rotateX(90deg)}

.box div:nth-of-type(2){background:#CF3;left:-100px;top:0;-webkit-transform-origin:right;-webkit-transform:rotateY(-90deg)}

.box div:nth-of-type(3){background:#CCF;left:0;top:0;}

.box div:nth-of-type(4){background:#0c9;left:0;top:100px;-webkit-transform-origin:top;-webkit-transform:rotateX(-90deg)}

.box div:nth-of-type(5){background:#0c9;left:100PX;top:0;-webkit-transform-origin:left;-webkit-transform:rotateY(90deg)}

.box div:nth-of-type(6){background:#f0c;left:0;top:0;-webkit-transform:translateZ(-100px) rotateX(180deg);}

.wrap:hover .box{-webkit-transform:rotateX(720deg)}

</style>

</head>

<body>

<div class="wrap">

<div class="box">

<div>1</div>

<div>2</div>

<div>3</div>

<div>4</div>

<div>5</div>

<div>6</div>

</div>

</div>

</body>

</html>






                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                CSS3动画
                                                3d
                                                CSS3 3D
                                                CSS3 3D 变换
                                                3D动画
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航