css3实现平移效果(transfrom:translate)的示例_css3_CSS_网页制作

来源:脚本之家  责任编辑:小易  

下面这个代码在2113Chrome上运行没问题啊5261:<style>.father{    width: 200px; height: 200px;    border: 1px solid #000;    margin: 100px auto;    perspective: 800px;}.son{    width: 100%; height: 100%;     background: lime;    transition: all 3s;    transform: translateZ(-200px);}.son:hover{    transform: translateZ(200px);}</style><div class="father">    <div class="son">鼠标移到这4102里</div></div>其他浏览器上如1653果没效果,版可自行添加前缀再试。注意:只权有IE10+、FireFox、Chrome、Safari才支持3D转换效果追问谢了啊,现在知道为什么我的代码没效果了,我之前只写了一个div,然后透视效果也写在了上面,结果浏览器没效果。然后我照着你的代码,把透视效果放在父级div上,这才有了效果…… 这问题都坑了我好多天了…,下面这个代码在copyChrome上运行没问题啊:bai其他浏览器du上如果没效果,可自zhi行添加前缀再试。注意:只有daoIE10+、FireFox、Chrome、Safari才支持3D转换效果。拓展:1、CSS即层叠样式表(Cascading StyleSheet)。 在网页制作时采用层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。2、CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。这些模块包括: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。本回答被网友采纳www.zgxue.com防采集请勿采集本网。

我们使用translate这个参数来实现移动

transition-property:width; 设定这个值以后,只有宽度会有过渡效果,用来对比的高度则不会有过渡,控制scale也是一样,transition-property:transform 就行

translateX:向X轴平移,填正数往右平移,填负数,往左平移

定义图片为绝对布局,在body宽高范围内使用函数让他宽度和高度持续增加。在调用setInterval("函数",每隔多少秒执行);搞定

在这里插入图片描述

translateY :向Y轴平移,填正数往下平移,填负数,往上平移

CSS3中使用transform属性可实现元素曲线运动。 CSS即层叠样式表(Cascading StyleSheet)。 在网页制作时采用层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 CSS3是CSS技术的升级版本,CSS3语言开发是

在这里插入图片描述

translateZ :填的值越大你看到的图像离你感觉越近,天的值越小你看到的图像离你越远

.xuanzhuan{animation:xz 1s linear infinite ;}@keyframes xz{from {transform:rotate(0deg);}to{transform:rotate(360deg);}}infinite 旋转不限次数,也可以改成1,旋转一次

在这里插入图片描述

translate同时设置 translateX ,translateY

不一定,transition只是一个过渡,可以是width,height,也可以是transform的变化过渡。 所以不一定要和transform一同使用,也可单独使用,如: transition: width 1s,height 2s;

translate(translateX,translateY)

第一个参数是向X轴平移,填正数往右平移,填负数,往左平移

第二个参数是向Y轴平移,填正数往下平移,填负数,往上平移

在这里插入图片描述

translate3d 同时设置 translateX ,translateY 和 translateZ 所以里面可以填三个参数

translate3d()

transform:translate3d(0,-50%,-50px)

第一个参数是向X轴平移,填正数往右平移,填负数,往左平移

第二个参数是向Y轴平移,填正数往下平移,填负数,往上平移

第三个参数是向Z轴平移,填的值越大你看到的图像离你感觉越近,天的值越小你看到的图像离你越远

到此这篇关于css3实现平移效果(transfrom:translate)的示例的文章就介绍到这了,更多相关css3 平移transfrom:translate内容请搜索真格学网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持真格学网!

具体可以参考css.doyoe.com 这个手册有详逗敏细介绍transition 是过渡<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><title>transition_CSS参睁档考手册_web前端开发参32313133353236313431303231363533e78988e69d8331333335336438考手册系列</title><style>h1{font-size:16px;}.test{overflow:hidden;width:100%;margin:0;padding:0;list-style:none;}.test li{float:left;width:100px;height:100px;margin:0 5px;border:1px solid #ddd;background-color:#eee;text-align:center;-moz-transition:background-color .5s ease-in;-webkit-transition:background-color .5s ease-in;-o-transition:background-color .5s ease-in;-ms-transition:background-color .5s ease-in;transition:background-color .5s ease-in;}.test li:nth-child(1):hover{background-color:#bbb;}.test li:nth-child(2):hover{background-color:#999;}.test li:nth-child(3):hover{background-color:#630;}.test li:nth-child(4):hover{background-color:#090;}.test li:nth-child(5):hover{background-color:#f00;}</style></head><body><h1>请将鼠标移动到下面的矩形上:</h1><ul 山早枝class="test"><li>背景色过渡</li><li>背景色过渡</li><li>背景色过渡</li><li>背景色过渡</li><li>背景色过渡</li></ul></body></html>transfrom 是变换<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><title>2D transform_CSS参考手册_web前端开发参考手册系列</title><style>h1{clear:both;padding-top:10px;font-size:16px;font-family:Arial;}.test{zoom:1;width:700px;margin:0;padding:0;list-style:none;}.test li{float:left;margin:20px 30px 0 0;border:1px solid #000;}.test li p{width:300px;height:100px;margin:0;background:#ddd;}.test .matrix{-moz-transform:matrix(0,1,1,1,10px,10px);-webkit-transform:matrix(0,1,1,1,10,10);-o-transform:matrix(0,1,1,1,10,10);-ms-transform:matrix(0,1,1,1,10,10);transform:matrix(0,1,1,1,10,10);}.test .translate p{-moz-transform:translate(5%,10px);-webkit-transform:translate(10px,10px);-o-transform:translate(10px,10px);-ms-transform:translate(10px,10px);transform:translate(10px,10px);}.test .translate2 p{-moz-transform:translate(-10px,-10px);-webkit-transform:translate(-10px,-10px);-o-transform:translate(-10px,-10px);-ms-transform:translate(-10px,-10px);transform:translate(-10px,-10px);}.test .translateX p{-moz-transform:translateX(20px);-webkit-transform:translateX(20px);-o-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px);}.test .translate3 p{-moz-transform:translate(20px);-webkit-transform:translate(20px);-o-transform:translate(20px);-ms-transform:translate(20px);transform:translate(20px);}.test .translateY p{-moz-transform:translateY(10px);-webkit-transform:translateY(10px);-o-transform:translateY(10px);-ms-transform:translateY(10px);transform:translateY(10px);}.test .translate4 p{-moz-transform:translate(0,10px);-webkit-transform:translate(0,10px);-o-transform:translate(0,10px);-ms-transform:translate(0,10px);transform:translate(0,10px);}.test .rotate{-moz-transform:rotate(-5deg);-webkit-transform:rotate(-5deg);-o-transform:rotate(-5deg);-ms-transform:rotate(-5deg);transform:rotate(-5deg);}.test .rotate2{-moz-transform:rotate(5deg);-webkit-transform:rotate(5deg);-o-transform:rotate(5deg);-ms-transform:rotate(5deg);transform:rotate(5deg);}.test .scale{-moz-transform:scale(.8);-webkit-transform:scale(.8);-o-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8);}.test .scale2{-moz-transform:scale(1.2);-webkit-transform:scale(1.2);-o-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2);}.test .skew{-moz-transform:skew(-5deg);-webkit-transform:skew(-5deg);-o-transform:skew(-5deg);-ms-transform:skew(-5deg);transform:skew(-5deg);}.test .skew2{-moz-transform:skew(-5deg,-5deg);-webkit-transform:skew(-5deg,-5deg);-o-transform:skew(-5deg,-5deg);-ms-transform:skew(-5deg,-5deg);transform:skew(-5deg,-5deg);}</style></head><body><h1>矩阵变换:matrix()</h1><ul class="test"><li class="matrix"><p>transform:matrix(0,1,1,1,10,10)</p></li></ul><h1>平移:translate(), translateX(), translateY()</h1><ul class="test"><li class="translate"><p>transform:translate(5%,10px)</p></li><li class="translate2"><p>transform:translate(-10px,-10px)</p></li><li class="translateX"><p>transform:translateX(20px)</p></li><li class="translate3"><p>transform:translate(20px)</p></li><li class="translateY"><p>transform:translateY(10px)</p></li><li class="translate4"><p>transform:translate(0,10px)</p></li></ul><h1>旋转:rotate()</h1><ul class="test"><li class="rotate"><p>transform:rotate(-15deg)</p></li><li class="rotate2"><p>transform:rotate(15deg)</p></li></ul><h1>缩放:scale()</h1><ul class="test"><li class="scale"><p>transform:scale(.8)</p></li><li class="scale2"><p>transform:scale(1.2)</p></li></ul><h1>扭曲:skew()</h1><ul class="test"><li class="skew"><p>transform:skew(-5deg)</p></li><li class="skew2"><p>transform:skew(-5deg,-5deg)</p></li></ul></body></html>animate 是动画<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><title>animation_CSS参考手册_web前端开发参考手册系列</title><style>div{position:absolute;top:50%;left:50%;overflow:hidden;width:300px;height:150px;margin:-75px 0 0 -150px;border:3px solid #eee;background:#e0e0e0;}span{opacity:0;display:block;height:50px;font:bold 14px/50px Georgia;}.a1{-webkit-transform:translate(60px);-webkit-animation:animations 2s ease-out;-moz-transform:translate(55px);-moz-animation:animations 2s ease-out;-o-transform:translate(55px);-o-animation:animations 2s ease-out;-ms-transform:translate(55px);-ms-animation:animations 2s ease-out;transform:translate(55px);animation:animations 2s ease-out;}@-webkit-keyframes animations{0%{-webkit-transform:translate(0);opacity:0;}50%{-webkit-transform:translate(30px);opacity:1;}70%{-webkit-transform:translate(35px);opacity:1;}100%{-webkit-transform:translate(60px);opacity:0;}}@-moz-keyframes animations{0%{-moz-transform:translate(0);opacity:0;}50%{-moz-transform:translate(30px);opacity:1;}70%{-moz-transform:translate(35px);opacity:1;}100%{-moz-transform:translate(60px);opacity:0;}}@-o-keyframes animations{0%{-o-transform:translate(0);opacity:0;}50%{-o-transform:translate(30px);opacity:1;}70%{-o-transform:translate(35px);opacity:1;}100%{-o-transform:translate(60px);opacity:0;}}@-ms-keyframes animations{0%{-ms-transform:translate(0);opacity:0;}50%{-ms-transform:translate(30px);opacity:1;}70%{-ms-transform:translate(35px);opacity:1;}100%{-ms-transform:translate(60px);opacity:0;}}@keyframes animations{0%{transform:translate(0);opacity:0;}50%{transform:translate(30px);opacity:1;}70%{transform:translate(35px);opacity:1;}100%{transform:translate(60px);opacity:0;}}.a3{-webkit-transform:translate(100px);-webkit-animation:animations3 2s ease-out 2s;-moz-transform:translate(100px);-moz-animation:animations3 2s ease-out 2s;-o-transform:translate(100px);-o-animation:animations3 2s ease-out 2s;-ms-transform:translate(100px);-ms-animation:animations3 2s ease-out 2s;transform:translate(100px);animation:animations3 2s ease-out 2s;}@-webkit-keyframes animations3{0%{-webkit-transform:translate(160px);opacity:0;}50%{-webkit-transform:translate(130px);opacity:1;}70%{-webkit-transform:translate(125px);opacity:1;}100%{-webkit-transform:translate(100px);opacity:0;}}@-moz-keyframes animations3{0%{-moz-transform:translate(160px);opacity:0;}50%{-moz-transform:translate(130px);opacity:1;}70%{-moz-transform:translate(125px);opacity:1;}100%{-moz-transform:translate(100px);opacity:0;}}@-o-keyframes animations3{0%{-o-transform:translate(160px);opacity:0;}50%{-o-transform:translate(130px);opacity:1;}70%{-o-transform:translate(125px);opacity:1;}100%{-o-transform:translate(100px);opacity:0;}}@-ms-keyframes animations3{0%{-ms-transform:translate(160px);opacity:0;}50%{-ms-transform:translate(130px);opacity:1;}70%{-ms-transform:translate(125px);opacity:1;}100%{-ms-transform:translate(100px);opacity:0;}}@keyframes animations3{0%{transform:translate(160px);opacity:0;}50%{transform:translate(130px);opacity:1;}70%{transform:translate(125px);opacity:1;}100%{transform:translate(100px);opacity:0;}}.a2{text-align:center;font-size:26px;-webkit-animation:animations2 5s ease-in-out 4s;-moz-animation:animations2 5s ease-in-out 4s;-o-animation:animations2 5s ease-in-out 4s;-ms-animation:animations2 5s ease-in-out 4s;animation:animations2 5s ease-in-out 4s;}@-webkit-keyframes animations2{0%{opacity:0;}40%{opacity:.8;}45%{opacity:.3;}50%{opacity:.8;}55%{opacity:.3;}60%{opacity:.8;}100%{opacity:0;}}@-moz-keyframes animations2{0%{opacity:0;}40%{opacity:.8;}45%{opacity:.3;}50%{opacity:.8;}55%{opacity:.3;}60%{opacity:.8;}100%{opacity:0;}}@-o-keyframes animations2{0%{opacity:0;}40%{opacity:.8;}45%{opacity:.3;}50%{opacity:.8;}55%{opacity:.3;}60%{opacity:.8;}100%{opacity:0;}}@-ms-keyframes animations2{0%{opacity:0;}40%{opacity:.8;}45%{opacity:.3;}50%{opacity:.8;}55%{opacity:.3;}60%{opacity:.8;}100%{opacity:0;}}@keyframes animations2{0%{opacity:0;}40%{opacity:.8;}45%{opacity:.3;}50%{opacity:.8;}55%{opacity:.3;}60%{opacity:.8;}100%{opacity:0;}}</style></head><body><div><span class="a1">CSS3 Animations</span><span class="a2">CSS3 Animations</span><span class="a3">CSS3 Animations</span></div></body></html>,  transition, transform, tanslate,animation分别为过渡,e69da5e887aa62616964757a686964616f31333337616565变换,平移、动画。transform的属性包括:rotate() / skew() / scale() / translate(,) 。  transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。  为了更好地理解 transform 属性,请查看这个演示。  默认值:none   继承性:no  版本:CSS3  JavaScript 语法:object.style.transform="rotate(7deg)"  语法  transform: none|transform-functions;  值 描述  none 定义不进行转换。  matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。  matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。  translate(x,y) 定义 2D 转换。  translate3d(x,y,z) 定义 3D 转换。  translateX(x) 定义转换,只是用 X 轴的值。  translateY(y) 定义转换,只是用 Y 轴的值。  translateZ(z) 定义 3D 转换,只是用 Z 轴的值。  scale(x,y) 定义 2D 缩放转换。  scale3d(x,y,z) 定义 3D 缩放转换。  scaleX(x) 通过设置 X 轴的值来定义缩放转换。  scaleY(y) 通过设置 Y 轴的值来定义缩放转换。  scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。  rotate(angle) 定义 2D 旋转,在参数中规定角度。  rotate3d(x,y,z,angle) 定义 3D 旋转。  rotateX(angle) 定义沿着 X 轴的 3D 旋转。  rotateY(angle) 定义沿着 Y 轴的 3D 旋转。  rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。  skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。  skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。  skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。  perspective(n) 为 3D 转换元素定义透视视图。  ,hahazaixian写的很详细,具体自己试一下就知道区别了内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 利用css3实现平移动画效果示例代码
  • css3 transition transfrom translate animate 有...
  • CSS3中的动画效果transform:translateZ(),在Z轴上...
  • css3.关于translate平移问题(求指导)
  • css3 实现动画效果,怎样使他无限循环动下去?
  • css3中transition 过渡效果如何只对transform:scal...
  • css3 一张图片,让他从左上角向右下角缓慢移动的效果
  • CSS3中如何使元素曲线运动
  • 如何用CSS3实现旋转图标特效
  • css3中transtion和transfrom一定要一起使用吗
  • css3平滑过渡效果怎么让宽度向左滑动
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作csscss3css3平移transfrom:translate利用css3实现平移动画效果示例代码css教程css3div+css教程web标准教程浏览器兼容教程css布局实例css3的transform中scale缩放详解纯css绘制漂亮的圆形图案效果纯css实现聊天框小尖角、气泡效果css3通过scale()、rotate()实现放大、旋转css3 icon font完全指南(css3 font 会取代icon图标)css3实现div圆角效果完整代码 css3实现背景颜色渐变让图片不再是唯一的实现方式8款精美的css3表单设计(登录表单/下拉选择/按钮附演示css3 media queries(响应式布局可以让你定制不同的分使用css3背景渐变中的透明度来设置不同颜色的背景渐变css3 实现图形下落动画效果css3实现平移效果(transfrom:translate)的示例css3 文字动画效果css3弹性盒子flex实现三栏布局的实现css3 按钮边框动画的实现css3 实现发光边框特效css 说明横向进度条最后显示文字的实现代码css3制作3d立方体loading特效css3实现莲花绽放的动画效果css3制作圆形滚动进度条动画的示例
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved