Home > Article > Web Front-end > CSS3 transforms 3D open_html/css_WEB-ITnose
CSS3 transforms 3D open_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:45:30849browse
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>css3 transforms 3D文字翻开</title></head><body><div class="component"> <ul class="grid"> <li class="ot-letter-left"><span data-letter="R">R</span></li> <li class="ot-letter-top"><span data-letter="T">T</span></li> <li class="ot-letter-right"><span data-letter="L">L</span></li> <li class="ot-letter-bottom"><span data-letter="B">B</span></li> </ul></div><style>ul,li{ list-style:none;}.grid { list-style: outside none none; margin: 0; padding: 0; position: relative; width: 100%;}.grid li { float: left; font-size: 12em; line-height: 1.5; max-height: 290px; position: relative; text-align: center; width: calc(100% / 6);}.grid li span { color: hsla(0, 0%, 0%, 0.6); display: inline-block; font-weight: 900; line-height: 1; perspective: 550px; position: relative; transform-style: preserve-3d; z-index: 1;}.grid li span::before, .grid li span::after { bottom: 0; content: attr(data-letter); left: 0; line-height: inherit; position: absolute; right: 0; top: 0; transition: all 0.3s ease 0s; z-index: 2;}.grid li span::before { color: hsla(0, 0%, 0%, 0.12); text-shadow: none;}.ot-letter-left { background: none repeat scroll 0 0 #e74d3c;}.ot-letter-left span { text-shadow: 1px 4px 6px #e74d3c, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #e74d3c;}.ot-letter-left span::after { color: #e74d3c;}.ot-letter-left:hover span::after { color: #ea6253;}.ot-letter-right { background: none repeat scroll 0 0 #ea6657;}.ot-letter-right span { text-shadow: 1px 4px 6px #ea6657, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #ea6657;}.ot-letter-right span::after { color: #ea6657;}.ot-letter-right:hover span::after { color: #ed7a6e;}.ot-letter-top { background: none repeat scroll 0 0 #ee7f72;}.ot-letter-top span { text-shadow: 1px 4px 6px #ee7f72, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #ee7f72;}.ot-letter-top span::after { color: #ee7f72;}.ot-letter-top:hover span::after { color: #f09389;}.ot-letter-bottom { background: none repeat scroll 0 0 #e95949;}.ot-letter-bottom span { text-shadow: 1px 4px 6px #e95949, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #e95949;}.ot-letter-bottom span::after { color: #e95949;}.ot-letter-bottom:hover span::after { color: #eb6e60;}.ot-letter-left span::before, .ot-letter-left span::after { transform-origin: 0 50% 0;}.ot-letter-left span::before { transform: scale(1.08, 1) skew(0deg, 1deg);}.ot-letter-left span::after { text-shadow: -1px 0 0 hsla(0, 100%, 100%, 0.1), 3px 0 1px hsla(0, 0%, 0%, 0.4); transform: rotateY(-15deg);}.ot-letter-left:hover span::before { transform: scale(0.85, 1) skew(0deg, 20deg);}.ot-letter-left:hover span::after { transform: rotateY(-40deg);}.ot-letter-right span::before, .ot-letter-right span::after { transform-origin: 100% 50% 0;}.ot-letter-right span::before { transform: scale(0.85, 1) skew(0deg, 1deg);}.ot-letter-right span::after { text-shadow: 1px 0 0 hsla(0, 100%, 100%, 0.1), -3px 0 1px hsla(0, 0%, 0%, 0.4); transform: rotateY(15deg);}.ot-letter-right:hover span::before { transform: scale(0.85, 1) skew(0deg, -20deg);}.ot-letter-right:hover span::after { transform: rotateY(40deg);}.ot-letter-top span::before, .ot-letter-top span::after { transform-origin: 50% 100% 0;}.ot-letter-top span::before { transform: scale(1, 0.95) skew(-4deg, 0deg);}.ot-letter-top span::after { text-shadow: 0 1px 0 hsla(0, 100%, 100%, 0.1), 0 -3px 1px hsla(0, 0%, 0%, 0.4); transform: rotateX(-15deg);}.ot-letter-top:hover span::before { transform: translateY(-0.05em) scale(1, 0.55) skew(-10deg, 0deg);}.ot-letter-top:hover span::after { transform: translateY(-0.035em) rotateX(-40deg);}.ot-letter-bottom span::before, .ot-letter-bottom span::after { transform-origin: 50% 0 0;}.ot-letter-bottom span::before { transform: scale(1, 1.05) skew(4deg, 0deg);}.ot-letter-bottom span::after { text-shadow: 0 -1px 0 hsla(0, 100%, 100%, 0.1), 0 3px 1px hsla(0, 0%, 0%, 0.4); transform: rotateX(15deg);}.ot-letter-bottom:hover span::before { transform: translateY(-0.035em) scale(1, 1.2) skew(10deg, 0deg);}.ot-letter-bottom:hover span::after { transform: translateY(0.045em) rotateX(40deg);}</style></body></html>
330099
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to get the content of this web page_html/css_WEB-ITnoseNext article：How to get the content of this web page_html/css_WEB-ITnose