1.需要了解相关css样式

1.position属性 值：relative\absolute;

/* position进行定位，父元素的position属性值为relative相对定位，子元素的position属性值为absolute相对定位*/

position:relative;

position:absolute;

2.transform-style属性 值：flat\preserve-3d;

/* transform-style在3d的情况下是否以3d的方式呈现，值flat子元素不保留3d的位置，preserve-3d子元素保留3d位置，呈现3d形式*/

transform-style:preserve-3d;

3.perspective属性 值：number\none;

/* 当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身，perspective 属性只影响 3D 转换元素 */

perspective:600;

4.动画animation属性

/* animation: 动画的名称 完成动画的时间 动画的速度 循环播放*/

animation: rotate 4s liner infinite;

/*定义关键帧@keyframes 动画的名字*/

@keyframes rotate{

0%{

transform: rotateX(0deg) rotateY(0deg);

}

100%{

transform: rotateX(360deg) rotateY(360deg);

}

}

5.nth-child(n)选择器；

.box:nth-child(2);

/*选择第二个.box*/

6.transition属性

/*过渡属性 完成过渡的时间*/

transition：0.5s；

7.transform属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

transform:rotate();/*定义2d旋转角度*/

transform:rotateX(90deg);/沿着X轴旋转90度，定义3d旋转*/

transform:rotateY(90deg);/沿着X轴旋转90度，定义3d旋转*/

translateX(x)/*定义转换，只是用 X 轴的值。*/

translateY(y)/*定义转换，只是用 Y 轴的值。*/

translateZ(z)/*定义 3D 转换，只是用 Z 轴的值。*/

效果显示

代码

Document

body{

background-color: #4b8bf4;

}

.wrap{

width: 200px;

height: 200px;

position: relative;

margin: 150px auto;

transform-style:preserve-3d;

animation: rotate 4s linear infinite;

perspective: 600;

}

.box{

width: 200px;

height: 200px;

position: absolute;

transition: 0.5s;

}

.box:nth-child(1){

background: url(./img/1.jpg);

transform: rotateX(90deg) translateZ(100px);

}

.box:nth-child(2){

background: url(./img/2.jpg);

transform: rotateX(90deg) translateZ(-100px);

}

.box:nth-child(3){

background: url(./img/3.jpg);

transform: rotateY(90deg) translateZ(100px);

}

.box:nth-child(4){

background: url(./img/4.jpg);

transform: rotateY(90deg) translateZ(-100px);

}

.box:nth-child(5){

background: url(./img/5.jpg);

transform: translateZ(100px);

}

.box:nth-child(6){

background: url(./img/6.jpg);

transform: translateZ(-100px);

}

@keyframes rotate {

0%{

transform: rotateX(0deg) rotateY(0deg);

}

100%{

transform: rotateX(360deg) rotateY(360deg);

}

}

.wrap:hover .box:nth-child(1){

transform: rotateX(90deg) translateZ(200px);

}

.wrap:hover .box:nth-child(2){

transform: rotateX(90deg) translateZ(-200px);

}

.wrap:hover .box:nth-child(3){

transform: rotateY(90deg) translateZ(200px);

}

.wrap:hover .box:nth-child(4){

transform: rotateY(90deg) translateZ(-200px);

}

.wrap:hover .box:nth-child(5){

transform:translateZ(200px);

}

.wrap:hover .box:nth-child(6){

transform:translateZ(-200px);

}

.bot{

width: 80px;

height: 80px;

position: absolute;

top: 50%;

margin-top: -40px;

left: 50%;

margin-left: -40px;

}

/* ?为什么从7开始，:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。*/

.bot:nth-child(7){

background: url(./img/7.jpg);

transform: rotateX(90deg) translateZ(40px) ;

}

.bot:nth-child(8){

background: url(./img/7.jpg);

transform: rotateX(90deg) translateZ(-40px) ;

}

.bot:nth-child(9){

background: url(./img/7.jpg);

transform: rotateY(90deg) translateZ(40px);

}

.bot:nth-child(10){

background: url(./img/7.jpg);

transform: rotateY(90deg) translateZ(-40px);

}

.bot:nth-child(11){

background: url(./img/7.jpg);

transform: translateZ(40px);

}

.bot:nth-child(12){

background: url(./img/7.jpg);

transform: translateZ(-40px);

}

通过CSS3实现旋转立方体的方法

发布时间：2020-08-27 14:18:45

来源：亿速云

阅读：78

作者：小新

这篇文章将为大家详细讲解有关通过CSS3实现旋转立方体的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

主要通过CSS3中transform属性实现，首先给元素设置成3D元素，然后定义六个面的样式再通过transform属性对其进行旋转即可实现旋转立方体效果

如今随着CSS3的不断成熟和发展，我们可以利用CSS3变换样式，translateZ，rotateX，rotateY，rotateZ，径向渐变，线性渐变，透视等属性创建一个可以旋转的3D立方体。

【推荐课程：CSS3教程】

在立方体内部是六个侧面，它们被定义为单独的图形元素，每个元素具有单独的“后”，“顶”，“底”，“左”，“右”和“前”。所以首先我们要创建html代码。包含这六个元素。如下代码所示

然后设置box的CSS属性，以及将它设置为3D元素。在这里需要注意要设置定位，目的是让六个元素可叠加在一起.box{

position: relative;

width:200px;

height:200px;

transform-style: preserve-3d;/*创造3D空间*/

-webkit-transform-style: preserve-3d;

transition: all 5s linear;

}

接下来就要设置立方体的六个面.box div{

width:200px;

height: 200px;

position: absolute;

left: 0;

top: 0;

transform-style: preserve-3d;

-webkit-transform-style: preserve-3d;

border: 1px solid #46B8DA;

opacity: 0.5;

}

六个面的公共部分设置完了，接下来就要设置这六个面的3d效果，我们可以通过transform 属性来设置3D变化，它可以允许我们对元素进行旋转，移动，倾斜等.one{

transform: rotateY(0deg) translateZ(100px);

background-color:rgb(255,118,19);

}

.two{

transform: rotateY(180deg) translateZ(100px);

background-color:rgb(231,78,72);

}

.three{

transform: rotateX(90deg) translateZ(100px);

background-color: rgb(75,165,165);

}

.four{

transform: rotateX(-90deg) translateZ(100px);

background-color:rgb(129,182,62);

}

.five{

transform: rotateY(90deg) translateZ(100px);

background-color: rgb(255,118,19);

}

.six{

transform: rotateY(-90deg) translateZ(100px);

background-color:rgb(244,208,114);

}

这样我们的立方体就做好了，当鼠标移上去的时候就会发生旋转.box:hover{

transform: rotateX(360deg) rotateY(360deg);

-webkit-transform: rotateX(360deg) rotateY(360deg);

}

效果图：

关于通过CSS3实现旋转立方体的方法就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。