变形/元素旋转/变形中心点/背面可见

                                                变形

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

....................................................................................................................

<style type="text/css">

/*旋转方向判断

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>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。