html5-CSDN博客

本文链接：https://blog.csdn.net/luna_H/article/details/135187819

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

word-wrap:break-word;

@font-face 引入字体文件

transition过渡

2D转换可以对元素进行移动、缩放、转动、拉长或拉伸。
       基本语法transform
       translate(X,Y)
       translateX(X)
       translateY(Y)
       translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

       rotate()
       scale()
       skew()
       matrix()

<!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" onclick="func1()">按钮1</button>
		 <button type="button" onclick="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>