您的位置：首页 > Web前端

WEB前端 | H5基础——(2)2D/3D形变、过渡及渐变

2016-09-19 14:14 337 查看

一、2D变换

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>2D变换</title>
<style type="text/css">
div {
width: 200px;
height: 200px;
background-color: red;
margin-right: 100px;
float: left;
}
.yuanshi {
color: white;
font-size: 50px;
}
.rotate {
/*旋转*/
transform: rotate(30deg);
}
.scale {
/*缩放 : 可以给1个或2个值*/
transform: scale(1,0.5);
}
.translate {
/*位移 : 一个值 水平
两个值 水平 竖直*/
transform: translate(100px,500px);
}
.skew {
color: white;
font-size: 50px;
transform: skewY(30deg);
}
.skew span {
transform: skewY(-30deg);
display: block;
}
</style>
</head>
<body>
<div class="yuanshi">原始</div>
<div class="rotate"></div>
<div class="scale"></div>
<div class="translate"></div>
<div class="skew"><span>倾斜</span></div>
</body>
</html>

二、3D变换

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>3D变换</title>
<style type="text/css">
/*
过渡：某一个变化的时候会有一个过渡的时间，不会显得很突兀
渐变：多重颜色在一起的时候，颜色与颜色之间不会有明显的分割线，会主机变化
2D/3D变幻：元素在2D平面/3D空间的变化
*/
/*div {
height: 200px;
width: 400px;
font-size: 40px;
line-height: 200px;
text-align: center;
color: white;
background: repeating-linear-gradient(45deg,blue 10%,red 20%);
transition: 60s ease-in-out all;
float: left;
margin-right: 100PX;
border-radius: 50%
}*/
/*	.rotateX:hover {
transform: rotateX(36000000000000deg);
transform-origin: (10px,50px);
}
.rotateY:hover {
transform: rotateY(36000000000000deg);
}
.rotateZ:hover {
transform: rotateZ(36000000000000deg);
}*/
.jingshen {
/*景深*/
perspective: 1200px;
}
.box {
transform-style: preserve-3d;
background-color: lightgrey;
/*transform: rotateY(70deg); */
}
.reddiv {
width: 200px;
height: 200px;
background-color: red;
margin: 0 auto;
transform-origin: center top;
transform: rotateX(50deg);
}
</style>
</head>
<body>
<!-- <div class="rotateX">rotateX</div>
<div class="rotateY">rotateY</div>
<div class="rotateZ">rotateZ</div> -->

<div class="jingshen">
<div class="box">
<div class="reddiv">

</div>
</div>
</div>
</body>
</html>

三、过渡

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>过渡</title>
<style type="text/css">
.reddiv {
width: 300px;
height: 200px;
background-color: red;
/*过渡属性 : 给哪个属性添加过渡*/
transition-property: all;
/*过渡时间 : 变化的总时长*/
transition-duration: 5s;
/*过渡延迟 : 几秒之后执行过渡动画*/
/*transition-delay: 1s; */
/*变化的方式 : 快->慢，慢->快，慢->快->慢
out     in      in-out
贝塞尔曲线*/
transition-timing-function: ease-out;
transition-timing-function: cubic-bezier(0, 0.4, 0.58, 1);
transition: 1s ease all;
}
.reddiv:hover {
background-color: blue;
width: 1800px;
/*height: 700px;*/
/*margin: 50%;*/
}
</style>
</head>
<body>
<div class="reddiv"></div>
</body>
</html>

四、渐变

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>渐变</title>
<style type="text/css">
div {
width: 200px;
height: 200px;
margin-right: 100px;
margin-bottom: 100px;
float: left;
}
.div1 {
background: -webkit-linear-gradient(left,red,orange,yellow,green,pink,blue,purple);
}
/*像素代表从左开始30px为纯蓝，从左开始100px是纯红，中间30px-100px为渐变色*/
.div2 {
background: -webkit-linear-gradient(left,blue 30px,red 100px);
}
.div3 {
background: -webkit-linear-gradient(top,blue 20%,red 80%);
}
.div4 {
background: repeating-linear-gradient(45deg,blue 10%,red 20%);
}
.div5 {
background: -webkit-radial-gradient(left top,red 20%,orange 50%,gold 80%);
}
.div6 {
background: repeating-radial-gradient(black 1%,grey 2%);
}
/*ellipse 椭圆
circle  圆*/
.div7 {
width: 350px;
border-radius: 50%;
background: repeating-radial-gradient(white 20%,black 99%);
}
.div8 {
width: 350px;
border-radius: 50%;
background: repeating-radial-gradient(circle,white 2%,black 5%);
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
<div class="div6"></div>
<div class="div7"></div>
<div class="div8"></div>
<div class="div9"></div>
<div class="div10"></div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  2D形变 3D形变 过渡 渐变 web前端
相关文章推荐
新的分享
章节导航