css旋转立方体教程,css 旋转立方体

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);

}