<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
h1 {
width: 100px;
text-shadow: 5px 5px 5px #FF0000;
/* overflow: hidden; */
/* white-space: nowrap; */
/* text-overflow: ellipsis; */
/* 换行方式 */
/* word-wrap:break-word; */
/* 对单词换行 */
word-break: keep-all;
}
/* @font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
.box{
font-family:myFirstFont;
} */
.box1 {
width: 200px;
height: 200px;
background-color: pink;
font-size: 30px;
transition: 1s;
/* transform: translate(0px,0px); */
}
</style>
</head>
<body>
<!-- <h1>111111111111111111
111111111111111111</h1> -->
<h1>hello word</h1>
<div>111111</div>
<div class="box">222222</div>
<!-- @font-face 引入字体文件 -->
<!-- transition过渡 -->
<!-- 2D转换可以对元素进行移动、缩放、转动、拉长或拉伸。
基本语法transform
translate(X,Y)
translateX(X)
translateY(Y)
translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。
rotate()
scale()
skew()
matrix() -->
<button type="button" οnclick="func1()">按钮1</button>
<button type="button" οnclick="func2()">按钮2</button>
<div class="box1">123123123</div>
</body>
<script type="text/javascript">
var box1 = document.getElementsByClassName("box1")[0];
function func1(){
// box1.style.transform = "translate(200px,200px)";
box1.style.transform = "translateX(300px)";
box1.style.transform = "translateY(0px)";
}
function func2(){
// box1.style.transform = "translate(0px,0px)";
box1.style.transform = "translateX(0px)";
box1.style.transform = "translateY(300px)";
}
</script>
</html>