用途 translateZ() 规定Z轴Z上的移动。 语法 translateZ(t) 值 值 描述 t 规定Z轴的移动距离。...monitor .front { height: 80px; width: 100px; background: #e0e0e0; transform: translateZ...width: 100px; background: linear-gradient(top, #f2f2f2, #e6e6e6 2.5px, #c2c2c2); transform: translateZ
} #div1>#div2 { width: 100%;height: 100%;background: green;position: absolute; transform: translateZ...div3 { width: 100%; height: 100%;background: green;position: absolute; transform:scaleX(-1) translateZ
); } #div1>div { width: 100%;height: 100%;background: yellow;position: absolute;transform: translateZ
一、translateZ 转换分析 1、translateZ 转换对应的空间分析 " 透视 " 是 模拟人的眼镜 , 观察 物体 在 平面上的成像 , translateZ 转换 , 是 物体 沿着 Z...和 成像平面 之间的距离 , 默认为 0 ; 如果 Z 增加 , 说明 物体 越靠近 眼睛 , 在平面上成像范围更大 ; 如果 Z 减小 , 说明 物体 越远离 眼睛 , 在平面上成像范围减小 ; translateZ...转换 就是 上图中的 Z 距离转换 , Z 越大 , 越靠近眼睛 , 物体显示就越大 ; 2、网页调试工具调试 translateZ 属性值 在网页中 , 修改标签元素的 transform: translateZ...转换分析 ---- 1、代码示例 - translateZ 为 0 的参照示例 在下面的代码中 , 设置了 500 像素的 视距 ; 设置元素的 3D 转换属性为 : /* 设置...3D 转换 */ transform: translateZ(0) 相当于在下图中 , 视距 ( 人眼距离成像平面距离 ) d = 500 像素 , 物体距离成像平面距离
); -o-transform: rotateY(60deg) translateZ(173.2px); transform: rotateY(60deg) translateZ(173.2px...-ms-transform: rotateY(120deg) translateZ(173.2px); -o-transform: rotateY(120deg) translateZ(173.2px...: rotateY(180deg) translateZ(173.2px); transform: rotateY(180deg) translateZ(173.2px); }.piece-5 {...(300deg) translateZ(173.2px); -ms-transform: rotateY(300deg) translateZ(173.2px); -o-transform:...rotateY(300deg) translateZ(173.2px); transform: rotateY(300deg) translateZ(173.2px); } 是不是已经实现了走马灯了
(-59vw); } 25% { transform: translate(-50%, -50%) translateZ(2vw); } 38%, 65% { transform...: translate(-50%, -50%) translateZ(0); } } p:nth-child(2) { animation: move2 5s ease-in-out infinite...(-55vw); } 25% { transform: translate(-50%, -50%) translateZ(2vw); } 38%, 65% { transform...: translate(-50%, -50%) translateZ(0); } } p:nth-child(3) { animation: move3 5s ease-in-out infinite...: translate(-50%, -50%) translateZ(0); } } p:nth-child(4) { animation: move4 5s ease-in-out infinite
(50px); } .cube li:nth-child(2){ transform: rotateX(180deg)translateZ(50px); } .cube li...transform: rotateX(90deg)translateZ(50px); } .cube li:nth-child(5){ transform: rotateY(...-90deg)translateZ(50px); } .cube li:nth-child(6){ transform: rotateY(90deg)translateZ(50px...li:nth-child(3){ transform: rotateX(-90deg)translateZ(100px); } .bigCube li:nth-child(4...)translateZ(100px); } （5）调用动画名字，设置动画旋转效果（@keyframe效果:实现动画效果；使用方法:@keyframe 后+动画名{from:初始状态;to:末状态}）。
: rotateY(90deg) translateZ(50px); } .cube .in_right{ transform: rotateY(-90deg) translateZ(50px...: rotateX(-90deg) translateZ(50px); } /*鼠标移入后样式*/ .cube:hover .out_front{ transform: rotateY(0deg...) translateZ(200px); } .cube:hover .out_back{ transform: translateZ(-200px) rotateY(180deg); } ....transform: rotateY(-90deg) translateZ(200px); } .cube:hover .out_top{ transform: rotateX(90deg)...translateZ(200px); } .cube:hover .out_bottom{ transform: rotateX(-90deg) translateZ(200px); } 其实都是前端代码控制的
(-200px) translateY(130px); transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px)...(-200px) translateY(130px); transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px)...: rotateX(180deg) translateZ(100px); transform: rotateX(180deg) translateZ(100px); } .world...(180deg) rotateZ(90deg) translateZ(-1px); transform: rotateX(180deg) rotateZ(90deg) translateZ...{ -webkit-transform: rotateX(180deg) translateZ(-1px); transform: rotateX(180deg) translateZ
center center } section div:nth-child(1){ transform:rotateY(0) translateZ...300px); } section div:nth-child(2){ transform: rotateY(60deg) translateZ...300px); } section div:nth-child(3){ transform: rotateY(120deg) translateZ...300px); } section div:nth-child(4){ transform: rotateY(180deg) translateZ...300px); } section div:nth-child(5){ transform: rotateY(240deg) translateZ
: rotateY(0deg) translateZ(100px); } .outer-back { transform: translateZ(-100px) rotateY(180deg)...; } .outer-left { transform: rotateY(90deg) translateZ(100px); } .outer-right { transform:...rotateY(-90deg) translateZ(100px); } /* 嵌套的内层立方体样式 */ .inner-cube>div { position: absolute;...: rotateY(0deg) translateZ(65px); } .inner-back { transform: translateZ(-65px) rotateY(180deg);...(-90deg) translateZ(65px); } .cube:hover .outer-top { right: -70px; bottom: -70px; opacity
/img1/004.png) no-repeat 0 0; -webkit-transform:rotateX(90deg) translateZ(50px); } .minbox li:nth-child.../img1/40.png) no-repeat 0 0; -webkit-transform:rotateX(90deg) translateZ(50px); } .maxbox li:nth-child...(100px); } .maxbox li:nth-child(2){ -webkit-transform:rotateX(180deg) translateZ(100px); } .maxbox li...:rotateX(90deg) translateZ(100px); } .maxbox li:nth-child(5){ -webkit-transform:rotateY(-90deg) translateZ...(100px); } .maxbox li:nth-child(6){ -webkit-transform:rotateY(90deg) translateZ(100px); } .box:hover
{ 0% { transform: rotateX(0deg) rotateY(0deg) translateZ(-1px); } 99.99999% { transform:...rotateX(0deg) rotateY(359deg) translateZ(-1px); } } .star-3 { transform: translateZ(0px); animation...: translateZ(1px); animation: 10s star-4-rotate linear infinite; } @keyframes star-4-rotate {...(0deg) rotateY(359deg) translateZ(1px); } } .star-5 { transform: translateZ(2px); animation: 10s...(40px); } 50% { transform: scale(1.5) translateZ(40px); } 100% { transform: scale(1) translateZ(
(50px) } .cube .back { transform: rotateX(-180deg) translateZ...(50px) } .cube .right { transform: rotateY(90deg) translateZ...(50px) } .cube .left { transform: rotateY(-90deg) translateZ...(50px) } .cube .top { transform: rotateX(90deg) translateZ(50px...(25px) } .cube-inner .top { transform: rotateX(90deg) translateZ
(100px); } .container .wrap .cube .out-back { transform: translateZ(-100px); } /* //y正方向逆时针 */....container .wrap .cube .out-left { transform: rotateY(-90deg) translateZ(100px); } .container...{ background-color: rgba(36, 238, 80, 0.253); transform: rotateX(-90deg) translateZ(100px);...{ transform: translateZ(-50px); } .container .wrap .cube .in-front { transform: translateZ(...) translateZ(200px); } .container .wrap .cube:hover .out-left { transform: rotateY(-90deg) translateZ
(650px);text-rendering: auto;} #box img:nth-child(2){ transform: rotateY(36deg) translateZ...(650px);text-rendering: auto;} #box img:nth-child(3){ transform: rotateY(72deg) translateZ...650px);text-rendering: auto;} #box img:nth-child(4){ transform: rotateY(108deg) translateZ...650px);text-rendering: auto;} #box img:nth-child(5){ transform: rotateY(144deg) translateZ...650px);text-rendering: auto;} #box img:nth-child(6){ transform: rotateY(180deg) translateZ
sec=1655964439&t=7415410490ba85c4a18c6d185fe2d77c); } .in-left { transform: rotateY(90deg) translateZ...w=500&h=399); } .wrap:hover .out-front { transform: translateZ(200px); } .wrap:hover .out-back {...transform: translateZ(-200px); } .wrap:hover .out-left { transform: rotateY(90deg) translateZ(200px...); } .wrap:hover .out-right { transform: rotateY(-90deg) translateZ(200px); } .wrap:hover .out-top...) translateZ(200px); }
(100px); } .two{ transform:rotateY(-90deg) translateZ(100px); } 相信一般人都和我一样有点不理解 translateZ 为什么要用...translateZ而不是translateX?....one{ /*旋转的时候坐标系发生了改变 使用translateZ 此时x轴正对屏幕 而不是translateX*/ transform:rotateY(90deg) translateZ...) translateZ(100px); } .four{ transform:rotateX(-90deg) translateZ(100px); } .five{ transform...: rotateY(0deg) translateZ(100px); } .six{ transform: rotateY(180deg) translateZ(100px); } 接下来添加动画效果
(650px);} #box img:nth-child(2){ transform: rotateY(36deg) translateZ(650px);}...transform: rotateY(144deg) translateZ(650px);} #box img:nth-child(6){ transform:...rotateY(180deg) translateZ(650px);} #box img:nth-child(7){ transform: rotateY(216deg...) translateZ(650px);} #box img:nth-child(8){ transform: rotateY(252deg) translateZ...#box img:nth-child(10){ transform: rotateY(324deg) translateZ(650px);} @keyframes go {
="100"，让图片向外拉伸： 搞定了一个方向后，所有方向都大致这样操作...3D 穿梭图： <media3D:CompositeTransform3D x:Name="TransformUp" x:Key="TransformUp" RotationX="90" TranslateZ...这简单，用最基本的 DoubleAnimation 操作TranslateZ 从 10 变到 200： <DoubleAnimation Storyboard.TargetName="TransformLeft" Storyboard.TargetProperty="<em>TranslateZ</em>
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
