一、旋转
// css
/*
过渡:某一个值变化的时候会有一个过渡的时间,不会显得很突兀
渐变:多重颜色在一起的时候,颜色与颜色之间不会有明显的分割线,会主机变化
2D/3D变幻:元素在2D平面/3D空间的变化
*/
.div-rotate{
height:200px;
width: 200px;
font-size: 40px;
line-height: 200px;
text-align: center;
color: white;
background-color: blue;
transition: 10s linear all;
}
// x轴旋转
.rotateX:hover {
-webkit-transform: rotateX(3600deg);
}
// y轴旋转
.rotateY:hover {
transform: rotateY(3600deg);
}
// z轴旋转
.rotateZ:hover {
transform: rotateZ(3600deg);
}
// html
<div class="rotateX div-rotate">rotateX</div>
<div class="rotateY div-rotate">rotateY</div>
<div class="rotateZ div-rotate">rotateZ</div>
1、rotateX 旋转效果
2、rotateY 旋转效果
3、rotateZ 旋转效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/2020100109095962.gif#pic_center
二、立方效果
// css
/*景深层*/
.jingshen {
/*景深 我们眼睛到3D容器Z面的一个距离*/
perspective: 1200px;
/*不同的位置看同一个东西看到的形状是不一样的 perspective-origin可以调整我们眼睛的位置*/
perspective-origin: 200px 200px;
background: #12ffff;
width: 800px;
}
.box {
/*设置box 为3D容器(普通的div 只能展示2D的内容 设置preserve-3d后就变成一个3D容器)*/
transform-style: preserve-3d;
/*background-color: lightgray;*/
position: relative;
height: 500px;
transition: 5s linear all;
/*旋转的时候让沿着哪个点去旋转*/
transform-origin: 200px 0px;
margin-left: 100px;
}
.box:hover {
transform: rotateY(360deg);
}
div div div {
width: 200px;
height: 200px;
position: absolute;
top: 100px;
left: 100px;
opacity: 0.7;
text-align: center;
line-height: 200px;
color: #fff;
font-size: 40px;
}
.reddiv {
background-color: red;
transform-origin: 0px 0px;
transform: rotateX(90deg);
}
.bluediv {
background-color: blue;
transform-origin: 0px 0px;
transform: rotateY(-90deg);
}
.greendiv {
background-color: green;
transform-origin: 0px 200px;
transform: rotateX(-90deg);
}
.golddiv {
background-color: gold;
transform-origin: 200px 0px;
transform: rotateY(90deg);
}
.purplediv {
background-color: purple;
transform: translateZ(200px);
}
.pinkdiv {
background-color: pink;
}
// html
//<!-- 想要用平面去展示3D的效果 需要用到3层
//1、景深层(jingshen)
//2、3D容器层(box)
//3、容器内的元素(六个小div)
// -->
<div class="jingshen">
<div class="box">
<div class="reddiv">1</div>
<div class="bluediv">2</div>
<div class="greendiv">3</div>
<div class="golddiv">4</div>
<div class="purplediv">5</div>
<div class="pinkdiv">6</div>
</div>
</div>