用jsp做的网站前后端交互,WordPress多站点绑定域名,南昌网站seo 优帮云,西安网站建设网络推广1、平面转换-平移 取值 像素单位数值百分比#xff08;参照盒子自身尺寸计算结果#xff09;正负均可 技巧 translate()只写一个值#xff0c;表示沿着X轴移动单独设置X或Y轴移动距离#xff1a;translateX()或translateY() !DOCTYPE html
html langen参照盒子自身尺寸计算结果正负均可 技巧 translate()只写一个值表示沿着X轴移动单独设置X或Y轴移动距离translateX()或translateY() !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.father {width: 500px;height: 300px;margin: 100px auto;border: 1px solid #000;}.son {width: 200px;height: 100px;background-color: pink;transition: all 0.5s;}/* 鼠标移入到父盒子son改变位置 */.father:hover .son {transform: translate(200px, 100px);/* 取值是百分比参照盒子自身尺寸计算结果 */transform: translate(50%, 100%);transform: translate(-50%, 100%);/* 只写一个数表示水平方向 */transform: translate(100%);transform: translateY(100%);transform: translateX(100%);}/style
/head
bodydiv classfatherdiv classson/div/div
/body
/html
2、平移实现居中效果
方法一 方法二百分比参照盒子自身尺寸计算结果 3、案例 双开门效果
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}/* 1. 布局父子结构父级是大图子级是左右小图*/.father {display: flex;margin: 0 auto;width: 1300px;height: 600px;background-image: url(../photo/1.jpg);overflow: hidden;}.father .left,.father .right {width: 50%;height: 600px;background-image: url(../photo/2.jpg);transition: all .5s;}.father .right {/* right 表示的取到精灵图右面的图片 */background-position: right 0;}/* 2. 鼠标悬停的效果左右移动 */.father:hover .left {transform: translate(-100%);}.father:hover .right {transform: translate(100%);}/style
/head
bodydiv classfatherdiv classleft/divdiv classright/div/div
/body
/html
