2019-06-04 变形中心点 背面可见 图片翻面

1.变形中心点
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;

}

2. 背面可见

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

}

3. 图片翻面

.con{

width: 300px;

height: 272px;

margin: 100px auto 0;

position: relative;

/*

以下两句是为了演示图片和文字层重叠的效果

transform-style: preserve-3d;

transform: perspective(800px) rotateY(45deg);初始旋转45度

*/

}

.pic, .info{

width: 300px;

height: 272px;

position: absolute;

left: 0;

top: 0;

/*图片和文字背面不可见，文字初始已翻转，所以隐藏露出底层图片*/

backface-visibility: hidden;

transform-style: preserve-3d;

transform: perspective(800px) rotateY(0deg);

transition: all 500ms ease;

}

.info{

background-color: gold;

text-align: center;

line-height: 272px;

/*transform: translateZ(10px);初始文字浮起10像素方便查看图片与文字分层的效果*/

/*初始文字翻转，鼠标移入时才翻正显示*/

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

}

/*鼠标移入时图片翻为背面隐藏*/

.con:hover .pic{

transform: perspective(800px) rotateY(180deg);

}

/*鼠标移入时文字翻为正面显示*/

.con:hover .info{

transform: perspective(800px) rotateY(0deg);

}