码迷,mamicode.com
首页 > Web开发 > 详细

css3 3d旋转图片立方体特效代码

时间:2020-03-03 10:42:22      阅读:106      评论:0      收藏:0      [点我收藏+]

标签:代码   init   tran   ace   str   back   pac   之间   gre   

一、什么是css3 3d旋转 ?

 

     形成一个3D空间: transform-style:preserve-3d    ( 让父元素形成3D,让其子元素在3D空间进行变化 )。

3d场景,在垂直于屏幕的方法,相对于3d多出个z轴,Z轴:靠近屏幕的方向是正向,远离屏幕的方向是反向,2d场景,在屏幕上水平和垂直的交叉线x轴和y轴。

                                   技术图片

 

 

 

二、关于css 3d旋转的相关属性及使用方法

变形属性:transform 
 
3D功能函数 ----3D的位移:transform:translate3d(x,y,z);                          3D缩放:transform:scale3d(x,y,z);
                                                            translateX()                                                                    scaleX()
                                                            translateY()                                                                    scaleY()
                                                            translateZ()                                                                    scaleZ()

3D的旋转:  ransform:rotate();
                                   rotateX()                                                         - x:是一个0到1之间的数值,主要用来描述元素围绕X轴旋转的矢量值;
                                   rotateY()                                                         - y:是一个0到1之间的数值,主要用来描述元素围绕Y轴旋转的矢量值;
                                   rotateZ()  //默认情况效果类似                         - z:是一个0到1之间的数值,主要用来描述元素围绕Z轴旋转的矢量值;
                                   rotate3D()
                                        rotate3D(x,y,z,a)   [ 0不旋转。1旋转 ]            - a:是一个角度值,主要用来指定元素在3D空间旋转的角度,如果其值为正值,元素顺时针旋转,反之元素逆时针旋转。
 
注意:在translate属性值中要是填写三个值,必须加上3d,即translate3d,rotate3d,scale3d
 
 
三、css3 3d旋转图片立方体特效代码
 
 
思路分析:先在一个盒子里面设置6个面,6个面都放在盒子内部,然后分别把6个面往6个不同的方向运动,形成立方体。
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .box{
            width:300px;
            height:300px;
            position:fixed;
            left:0;right:0;
            top:0;bottom:0;
            margin:auto;
            transform-style: preserve-3d;        //形成3d空间)
            transform:rotateX(20deg) rotateY(30deg);    //为了方便观察让3D舞台转动角度 
            transition:2s;   //为了过度看起来更舒服
        }
        .box div{
            width:300px;
            height:300px;
            text-align: center;
            line-height:300px;
            font-size: 100px;
            font-weight:bolder;
            color:#fff;
            position:absolute;    //让6个面全部定位在父元素里面 
            left:0;top:0;
            opacity:0.5;   //透明属性
            border:2px solid #000;
            backface-visibility:hidden;   //使背面不可见,方便自己看,也可以不设置
        }
 
        .con1{
            /* 第一个面往前走 */
            background:red;
            transform:translateZ(150px);
        }
        .con2{
            /* 第二个面往后走 */
            background:blue;
            transform:translateZ(-150px) rotateY(180deg); /*rotateY(180deg)  让正面朝外*/
        }
        .con3{
            /* 先往上位移150px  再绕着X轴转动90deg */
            background:pink;
            transform:translateY(-150px) rotateX(90deg);
        }
        .con4{
            /* 先往下位移150px,再绕着X轴转动90deg */
            background:green;
            transform:translateY(150px) rotateX(-90deg);
        }

        .con5{
            /* 先往左位移150px , 再绕着Y轴转动90deg */
            background:rosybrown;
            transform:translateX(-150px) rotateY(-90deg);
        }
        .con6{
            /* 先往右侧位移150px,再绕着Y轴转动90deg */
            background:#000;
            transform:translateX(150px) rotateY(90deg);
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="con1">1</div>
        <div class="con2">2</div>
        <div class="con3">3</div>
        <div class="con4">4</div>
        <div class="con5">5</div>
        <div class="con6">6</div>
    </div>
</body>
</html>
技术图片

 

 

css3 3d旋转图片立方体特效代码

标签:代码   init   tran   ace   str   back   pac   之间   gre   

原文地址:https://www.cnblogs.com/BUhuo/p/12386166.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!