This is a house decoration tool based on HTML5 and CSS3. The tool provides different materials and colors for each part of the house. Click the corresponding material to switch the material of the corresponding part to the selected one. This tool is similar to the character image changing tool, which can change the clothes of each part of the character. In addition, the knowledge point of this tool is to use CSS3 to achieve 3D animation effects. When you move the mouse, you can see all sides of the house.
Advertisement
<div class="thamb-wrapper"> <div class="fronton-controll controll"> <h2>Fronton color</h2> <div style="background-color: #C86526" class="thamb t-fronton"></div> <div style="background-color: #4E6457" class="thamb t-fronton"></div> <div style="background-color: #DFB46F" class="thamb t-fronton"></div> <div style="background-color: #CCCCCC" class="thamb t-fronton"></div> <div style="background-color: #6F4431" class="thamb t-fronton"></div> <div style="background-color: #A26B70" class="thamb t-fronton"></div> <div style="background-color: #813515" class="thamb t-fronton"></div> <div style="background-color: #9e8f70" class="thamb t-fronton"></div> <div style="background-color: #2d5b45" class="thamb t-fronton"></div> </div> <div class="roof-controll controll"> <h2 class="roof">Roof Options</h2> <div style="background-image: url(http://fdsea.ru/img/roof_1.jpg)" class="thamb t-roof"></div> <div style="background-image: url(http://fdsea.ru/img/roof_2.jpg)" class="thamb t-roof"></div> <div style="background-image: url(http://fdsea.ru/img/roof_3.jpg)" class="thamb t-roof"></div> <div style="background-image: url(http://fdsea.ru/img/roof_4.jpg)" class="thamb t-roof"></div> <div style="background-image: url(http://fdsea.ru/img/roof_5.jpg)" class="thamb t-roof"></div> <div style="background-image: url(http://fdsea.ru/img/roof_6.jpg)" class="thamb t-roof"></div> <div style="background-image: url(http://fdsea.ru/img/roof_7.jpg)" class="thamb t-roof"></div> </div> <div class="wall-controll controll"> <h2 class="roof">Wall Options</h2> <div style="background-image: url(http://fdsea.ru//img/brick.jpg);" class="thamb t-wall"></div> <div style="background-image: url(http://fdsea.ru//img/brick_1.jpg);" class="thamb t-wall"></div> <div style="background-image: url(http://fdsea.ru//img/brick_2.jpg)" class="thamb t-wall"></div> <div style="background-image: url(http://fdsea.ru//img/brick_3.jpg)" class="thamb t-wall"></div> <div style="background-image: url(http://fdsea.ru//img/log_1.jpg)" class="thamb t-wall"></div> <div style="background-image: url(http://fdsea.ru//img/log_2.jpg)" class="thamb t-wall"></div> <div style="background-image: url(http://fdsea.ru//img/log_3.jpg)" class="thamb t-wall"></div> <div style="background-image: url(http://fdsea.ru//img/log_4.jpg)" class="thamb t-wall"></div> </div> </div>
body { perspective: 1600px; position: relative; font-family: "Raleway", sans-serif; background-color: #dcedc8; } h1 { position: fixed; transform: rotate(-90deg); top: 400px; left: -130px; font-size: 1.3em; } .block { width: 200px; height: 200px; border: 1px solid #f2e8c9; background-repeat: repeat; transform-origin: 50% 50%; position: absolute; top: 5%; left: 35%; font-size: 3em; transform-style: preserve-3d; } .block .side { position: absolute; top: 0; left: 0; width: 100%; height: 100%; backface-visibility: hidden; } .block .block__front { text-align: center; line-height: 200px; background-color: #DFB46F; z-index: 1; background-size: 100%; background-image: url(http://fdsea.ru/img/roof_7.jpg); }
var wrapper = document.querySelector('.thamb-wrapper'), roof = document.querySelectorAll('.block__front'), wall = document.querySelectorAll('.wall'), home = document.querySelector('.home'), houseWrapper = document.querySelector('.home-wrapper'), fronton = document.querySelector('.fronton'), coord = void 0; function setPattern(plates, targetBackground) { Array.from(plates).forEach(function (v) { return v.style.backgroundImage = targetBackground.style.backgroundImage; }); } wrapper.addEventListener('click', function (e) { var targSt = e.target; if (targSt.classList.contains('t-roof')) { setPattern(roof, targSt); } else if (targSt.classList.contains('t-wall')) { setPattern(wall, targSt); } else if (targSt.classList.contains('t-fronton')) { fronton.style.borderBottomColor = targSt.style.backgroundColor; } }, false); houseWrapper.addEventListener('mousemove', function (e) { coord = { x: e.offsetX, y: e.offsetY }; home.style.transform = 'rotateY(' + coord.x / 5 + 'deg) rotateX(' + -coord.y / 20 + 'deg) translate(-50%, -50%)'; });
Advertisement