移动端十二章3D

科技2022-08-13 92

3d

transform-origin:基点(旋转中心点)

定义x轴的写法 :left/center/right/length/% 定义Y轴的写法 :top/center/bottom/20px/50% transform-origin:x y;

等价写法

transform: translate3d(30px,30px,800px) transform:translateZ(800px) translateX(30px) translateY(30px); transform:translateZ(800px) translate(30px,30px);

实例：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <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> </head> <body> <div>1212</div> </body> </html>

2D转换成3D

transform-style:把2D转换成3D/ preserve-3d; perspective: 像素px;(景深的值越小，用户的视觉就在元素的里面，值越大，用户的视觉就在元素的外面) perspective 属性定义 3D 元素视图的距离，以像素计。当元素定义 perspective 属性时，其子元素会获得透视效果 perspective翻译过来叫景深

实例：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <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> </head> <body> <div class="wrap"> <div class="box">1212</div> </div> </body> </html>

Processed: 0.016, SQL: 9