css3D效果
2016-02-21 00:00
411 查看
摘要: 保存代码以后看
1.(3D 沿着Y 轴转)
2.头像缩放 (scale)
3.下拉框的下三角 设置border-tranparent-rorate
4.mask
5.打开的盒子 (3D 沿着X 轴转)
1.(3D 沿着Y 轴转)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3D旋转Y轴</title> </head> <style> div{ width: 200px; height: 200px; margin:100px 100px; perspective:300px; position: relative; border: 1px solid #000; } img{ width: 200px; height: 200px; border-radius: 100px; transition: all 1s; position: absolute; top:0; left:0; backface-visibility: hidden;/* 背后影藏*/ } .c1{ z-index:1; } .c2{ transform: rotateY(-180deg); } div:hover .c1{ transform:rotateY(-180deg); } div:hover .c2{ transform:rotateY(0deg); } </style> <body> <div> <img src="./t02.jpg" alt="girl"> <img src="./hy.jpg" alt="qq" width="200px" height="200px"> </div> </body> </html>
2.头像缩放 (scale)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> #pic-scale{ width:300px; height:256px; border:1px solid red; margin: 100px auto; position: relative; overflow: hidden; } #pic-scale img{ transition: all 0.5s; cursor: pointer; } #pic-scale img:hover{ transform: scale(1.2); } #pic-scale span{ background: #fff; opacity: 0.5; display: none; position: absolute; top:216px; text-align: center; line-height: 40px; } </style> <body> <div id="pic-scale" > <img src="./t02.jpg" alt="qqmusic" onmouseover="over()" onmouseout="out()"> <span id="hy">哈哈哈哈</span> </div> <script> function over(){ var hy =document.getElementById("hy"); hy.style.display="block"; hy.style.height="40px"; hy.style.width="300px"; } function out(){ var hy =document.getElementById("hy"); hy.style.display="none"; } </script> </body> </html>
3.下拉框的下三角 设置border-tranparent-rorate
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三角</title> </head> <style> #input{ width: 200px; height: 50px; border: 1px solid #000; position: relative; } input{ width: 150px; height: 40px; position: absolute; } #input #sj{ width: 30px; height: 30px; border-right: 1px solid #000; border-bottom: 1px solid #000; position: absolute; top:2px; right: 2px; transform:rotate(45deg); } </style> <body> <div id="input"> <input type="text"> <div id="sj"></div> </div> </body> </html>
4.mask
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> #img-container{ position: relative; width: 200px; height: 100px; border: 5px solid #40BCFF; } .img-left{ background: url(hy.jpg); background-size: cover; width: 100%; height: 100%; } .img-right{ position: absolute; left: 0; top: 0; background: url(c5131475jw1f12c2fetnrj20rs0hdjrd.jpg); background-size: cover; -webkit-mask-image: -webkit-linear-gradient(left top, transparent 50%, white 50%); width: 100%; height: 100%; } </style> <body> <div id="img-container"> <div></div> <div></div> </div> </body> </html>
5.打开的盒子 (3D 沿着X 轴转)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>打开的盒子</title> </head> <style> div{ width: 300px; height: 256px; margin: 100px auto; position: relative; } img{ border-radius: 150px; position: absolute; top:0; transition: all 0.5s; } div:hover .img2{ transform-origin: bottom; transform: rotateX(180deg); } </style> <body> <div> <img src="./t02.jpg" alt="girl"> <img class="img2 "src="./t02.jpg" alt="girl"> </div> </body> </html>
相关文章推荐
- CSS清浮动处理(Clear与BFC)
- CSS3新增文本属性详述
- CSS3渐变——线性渐变
- css设计指南-笔记5
- css设计指南-笔记4
- NEC 框架规范 css reset
- HTML+CSS学习笔记(2) - 认识标签(1)
- HTML+CSS学习笔记(1) - Html介绍
- CSS padding margin输入不同值个数的效果详解
- 第十三章 用户界面样式
- css中的块级和内联元素
- css中的百分比计算方法
- 恶补CSS的布局知识
- CSS样式笔记_背景文本字体链接
- 【css】display与position
- css清除浮动大全
- css3 animation 中的 steps
- Css 选择器总结
- CSS基础笔记
- 7个CSS单位