c3 3D效果
transfrom 3D效果
1. perspective: 400px; 先给父元素设置景深:眼睛距离舞台的位置
2.反面效果:/* backface-visibility:hidden
设置元素背面是否可见
visible:可见;
hidden:不可见;*/
transform-style: preserve-3d;
flat:平面2D显示;
transform: 旋转
rotate(30deg) :定义2D旋转,参数角度
rotateX()定义沿着X轴的3D旋转 正值:向后躺 负值:向前趴
rotateY()定义沿着Y轴的3D旋转 正值:向里转 负值:向外转
rotateZ()定义沿着Z轴的3D旋转
none:不旋转
perspective 景深:眼睛距离舞台的距离 3D变形要有舞台概念,添加景深,单位是px
度数:正值是顺时针转 负值是逆时针转
缩放: scale() scaleX() scaleY() 度数:大于1是放大,小于1是缩小
变形斜切:skew(x,y):定义沿着X轴和Y轴的2D斜切转换
skewX():定义沿着X轴的2D斜切转换
skewY():定义沿着Y轴的2D斜切转换
第一个参数表示横向斜切 第二个参数表示纵向斜切
移动:translateX():定义对象x轴的平移
translateY():定义对象Y轴的平移
translateZ():定义对象Z轴的放大缩小,效果和scale相同
transform-style: 设置组合体的显示方式:
flat:平面2D显示;
preserve-3d:立体3D显示多个形变用空格隔开
参考位置:transform-origin 属性允许改变被转换元素的参考位置
设置旋转轴
第一个参数是横向位置(具体尺寸0px/方向描述性参数:left/right/bottom/top/center/还可以用百分比)
第二个参数是纵向位置
left top 相当于 0 0
top center 相当于 0 50%
right top 相当于 100% 0
沿x轴转 : top:0% center:50% bottom:100%;
沿y轴转 : left:0% center:50% right:100%
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>老铁没毛病</title> </head> <style> body{ perspective: none; /*perspective-origin: 10% 10%;*/ } .div1{ width: 300px; height: 300px; /*添加图片*/ background-image:url(1.jpg); /*让图片填满*/ background-size:cover; position: absolute; left: 800px; top: 300px; transition: translateX(0px) translateX(-50%) rotateY(-10deg); animation: run 10s forwards infinite; /*旋转*/ /* transform: rotateY(60deg) translateZ(100px);*/ } .div2{ width: 300px; height: 300px; /*添加图片*/ background-image:url(1.jpg); /*让图片填满*/ background-size:cover; position: absolute; left: 800px; top: 300px; /*旋转*/ /* transform: rotateY(60deg) translateZ(100px);*/ animation: runl 10s forwards infinite; } .div3{ width: 300px; height: 300px; /*添加图片*/ background-image:url(1.jpg); /*让图片填满*/ background-size:cover; position: absolute; left: 800px; top: 300px; /*旋转*/ /* transform: rotateY(60deg) translateZ(100px);*/ animation: runi 10s forwards infinite; } .div4{ width: 300px; height: 300px; /*添加图片*/ background-image:url(1.jpg); /*让图片填满*/ background-size:cover; position: absolute; left: 800px; top: 300px; /*旋转*/ /* transform: rotateY(60deg) translateZ(100px);*/ animation: runp 10s forwards infinite; } .div5{ width: 300px; height: 300px; /*添加图片*/ background-image:url(1.jpg); /*让图片填满*/ background-size:cover; position: absolute; left: 800px; top: 300px; /*旋转*/ /* transform: rotateY(60deg) translateZ(100px);*/ animation: runa 10s forwards infinite; } .div6{ width: 300px; height: 300px; /*添加图片*/ background-image:url(1.jpg); /*让图片填满*/ background-size:cover; position: absolute; left: 800px; top: 300px; /*旋转*/ /* transform: rotateY(60deg) translateZ(100px);*/ animation: runy 10s forwards infinite; } @keyframes runa{ 0%{ transform: rotateY(240deg) translateZ(500px); } 100%{ transform: rotateY(600deg) translateZ(500px); } } @keyframes runy{ 0%{ transform: rotateY(300deg) translateZ(500px); } 100%{ transform: rotateY(660deg) translateZ(500px); } } @keyframes runp{ 0%{ transform: rotateY(180deg) translateZ(500px); } 100%{ transform: rotateY(540deg) translateZ(500px); } } @keyframes runi{ 0%{ transform: rotateY(120deg) translateZ(500px); } 100%{ transform: rotateY(480deg) translateZ(500px); } } @keyframes runl{ 0%{ transform: rotateY(60deg) translateZ(500px); } 100%{ transform: rotateY(420deg) translateZ(500px); } } @keyframes run{ 0%{ transform: rotateY(0deg) translateZ(500px); } 100%{ transform: rotateY(360deg) translateZ(500px); } } </style> <body> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> <div class="div4"></div> <div class="div5"></div> <div class="div6"></div> </body> </html>
效果图