变形
<style type="text/css">
.box,.box2,.box3,.box4{
width: 200px;
height: 200px;
background-color: gold;
margin: 50px auto 0;
transition: all 1s ease;
}
.box:hover{
/*box的动画不会影响到box2*/
/*位移*/
transform: translate(50px,50px);
}
.box2:hover{
/*沿Z轴旋转360度*/
transform: rotate(360deg);
}
.box3:hover{
/*缩放*/
transform: scale(0.5,0.2);
}
.box4:hover{
/*斜切*/
/*transform: skew(45deg,0);*/
transform: skew(0,45deg);
}
</style>
...............................................................................................
元素旋转
默认沿Z轴旋转
transform: rotate(45deg);
perspective设置透视距离，经验数值800比较符合人眼的透视效果
transform: perspective(800px) rotateX(45deg);
....................................................................................................................
>
/*旋转方向判断
1、X轴向右、Y轴向下、Z轴向屏幕外
2、让轴向对着自己，顺时针方向就是该轴向的旋转方向*/
.box{
width: 300px;
height: 300px;
background-color: gold;
margin: 50px auto 0;
transition: all 500ms ease;
/*设置盒子按3D空间显示*/
transform-style: preserve-3d;
transform: perspective(800px) rotateY(0deg);
}
.box:hover{
/*默认沿Z轴旋转*/
/*transform: rotate(45deg);*/
/*perspective设置透视距离，经验数值800比较符合人眼的透视效果*/
/*transform: perspective(800px) rotateX(45deg);*/
transform: perspective(800px) rotateY(-45deg);
}
</style>
................................................................................................................................
变形中心点
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: gold;
float: left;
margin: 30px;
transition: all 500ms ease;
}
div:hover{
transform: rotate(-90deg);
}
div:nth-child(1){
/*设置变形的中心点*/
transform-origin: left center;
}
div:nth-child(2){
transform-origin: left top;
}
div:nth-child(3){
transform-origin: 50px 50px;
}
</style>
.............................................................................................................................................
背面可见
<style type="text/css">
.con{
width: 300px;
height: 300px;
margin: 50px auto 0;
border: 1px solid #000;
}
.box{
width: 300px;
height: 300px;
background-color: gold;
text-align: center;
line-height: 300px;
font-size: 50px;
transition: all 500ms ease;
/*设置盒子按3d空间显示*/
transform-style: preserve-3d;
/*设置透视距离、三维旋转的初始角度*/
transform: perspective(800px) rotateY(0deg);
/*设置盒子背面是否可见*/
backface-visibility: hidden;
}
.con:hover .box{
transform: rotateY(180deg);
}
</style>
作者：YangMl
链接：https://www.jianshu.com/p/90f960ece5e6
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
