css3 3d旋转图片和立方体

最新推荐文章于 2023-01-16 20:41:22 发布

weixin_46386292

最新推荐文章于 2023-01-16 20:41:22 发布

阅读量208

点赞数

本文链接：https://blog.csdn.net/weixin_46386292/article/details/104591061

版权

3d旋转

CSS3中的3D旋转主要包括**rotateX()、rotateY()、rotateZ()和rotate3d()**四个功能函数；
下面来看具体案例：

rotateX() ,RotateY(),RotateZ()的应用

1.首先我们先来搭建好结构：

<style>
        *{
            margin:0;
            padding:0;
        }
        .box{
            width:650px;
            height:300px;
            background:url(./images/a.jpg);
            background-size:100% 100%;
            margin:100px auto;
        }
        h2{
            width:200px;
            height:100px;
            background: url(./images/b.jpg);
            background-size:100% 100%;
        }      
    </style>

<body>
    <div class="box">
        <h2></h2>
    </div>
</body>

效果图:
在这里插入图片描述
2.然后让box形成一个3d的空间

transform-style:preserve-3d;
transform:rotateY(50deg);

设置h2过渡属性（根据实际情况进行时间设置）：

transition:1s;

设置鼠标滑过之后box内部的3d旋转变化：

.box:hover h2{
            transform: rotateX(60deg);
        }

效果图：
在这里插入图片描述
绕x轴顺时针旋转，正值为顺时针，负值为逆时针
同理可得：
设置rotateZ（）：

.box:hover h2{
            transform: rotateZ(60deg);
        }

在这里插入图片描述

Rotate3D()

rotate3D(x,y,z,a) [ 0不旋转。1旋转 ]

x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。

立方体

1.首先搭建结构，给每张图片加上定位,让6个面全部定位在父元素内

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 300px;
            height: 300px;
            position: fixed;
            left: 0;right: 0;
            top: 0;bottom: 0;
            margin: auto;
        }
        .box div{
            width: 300px;
            height: 300px;
            text-align: center;
            line-height: 300px;
            font-size: 100px;
            font-weight:bolder;
            color:#fff;
            position: absolute;
            left: 0;top: 0;
        }
        .box div img{
            width:100%;
            height:100%;
        }
       
    </style>
</head>
<body>
    <div class="box">
        <div class="con1">
            <img src="./images/1.jpg" alt="">
        </div>
        <div class="con2">
            <img src="./images/2.jpg" alt="">
        </div>
        <div class="con3">
            <img src="./images/3.jpg" alt="">
        </div>
        <div class="con4">
            <img src="./images/4.jpg" alt="">
        </div>
        <div class="con5">
            <img src="./images/5.jpg" alt="">
        </div>
        <div class="con6">
            <img src="./images/1-1.jpg" alt="">
        </div>
    </div>
</body>
</html>

2.然后让box形成一个3d空间加上过渡时间，为了方便我们视觉效果给3d舞台加上转动

transform-style: preserve-3d;
transform:rotateX(20deg) rotateY(30deg);
transition:1s;

在这里插入图片描述
3.设置鼠标滑过改变6个面的变形原点，并设置他们的旋转和位移让立方体完成

.box:hover .con1{
            transform-origin:right center;
            transform:rotateY(90deg);
        }
        .box:hover .con2{
            transform-origin:left center;
            transform:rotateY(-90deg);
        }
        .box:hover .con3{
            transform-origin: center top;
            transform:rotateX(90deg);
        }
        .box:hover .con4{
            transform-origin:center bottom;
            transform:rotateX(-90deg);
        }
        .box:hover .con5{
            transform:translateZ(300px);
        }
        .con6{
            transform:rotateY(180deg);
        }

鼠标滑过给box添加3d效果

.box:hover{
      transform: rotateY(30deg) rotateX(20deg);
}

效果图：
在这里插入图片描述

拓展：让立方体转动
在上面一个例子的基础上接下来：
1.在box里面调用关键帧

animation: boxRotate 30s linear infinite;

2.制作一个关键帧

@keyframes boxRotate{
            0%{
                transform: rotateX(0) rotateY(0);
            }
            25%{
                transform:rotateX(180deg) rotateY(180deg);
            }
            50%{
                transform: rotateX(0) rotateY(360deg);
            }
            75%{
                transform:rotateX(-180deg) rotateY(540deg);
            }
            100%{
                transform:rotateX(0deg) rotateY(720deg);
            }
        }

注释：此处应注意，要设置几个面，就是100除以几，然后从0%开始，100%结束。
最后是效果图由于无法上传视频只能给看截图
在这里插入图片描述

在这里插入图片描述

weixin_46386292

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3 3d旋转图片和立方体

3d旋转CSS3中的3D旋转主要包括**rotateX()、rotateY()、rotateZ()和rotate3d()**四个功能函数；下面来看具体案例：rotateX() ,RotateY(),RotateZ()的应用1.首先我们先来搭建好结构：<style> *{ margin:0; padding:0;...
复制链接

扫一扫