transform-origin:基点(旋转中心点)
定义x轴的写法 :left/center/right/length/%
定义Y轴的写法 :top/center/bottom/20px/50%
transform-origin:x y;
css:
<style type="text/css">
div{
width: 200px;
height: 200px;
background: red;
margin: 100px auto;
transition: 1s;
/*基点就是元素旋转的中心点*/
/*transform-origin: left top;*/
/*transform-origin: left bottom;*/
/*transform-origin: left;*/
/*transform-origin: center;*/
/*transform-origin: right bottom;*/
/*像素写法*/
/*transform-origin:0 0 ;*/
/*transform-origin:200px 200px ;*/
/*百分比*/
/*transform-origin:0 100% ;*/
/*transform-origin:100% 0% ;*/
/*transform-origin:50% 0;*/
}
div:hover{
transform:rotate(160deg)
}
</style>
html:
<div>1212</div>
等价写法
transform: translate3d(30px,30px,800px)
transform:translateZ(800px) translateX(30px) translateY(30px);
transform:translateZ(800px) translate(30px,30px);
3d属性:
transform-style:把2D转换成3D/ preserve-3d;
perspective: 像素px;(景深的值越小,用户的视觉就在元素的里面,值越大,用户的视觉就在元素的外面)
perspective 属性定义 3D 元素视图的距离,以像素计。
当元素定义 perspective 属性时,其子元素会获得透视效果
perspective翻译过来叫 景深
css:
<style type="text/css">
.wrap{
width: 200px;
height: 300px;
border: 1px solid red;
margin: 100px auto;
position: relative;
/*把父元素变成3d环境*/
transform-style: preserve-3d;
/*景深*/
perspective: 1px;
}
.box{
width: 190px;
height: 290px;
background: red;
position: absolute;
top:5px;
left:5px;
transition: 1s;
}
.box:hover{
transform:rotateX(7360deg) rotateY(7760deg) rotateZ(7960deg)
}
</style>
html:
<div class="wrap">
<div class="box">1212</div>
</div>