CSS Отражение изображения
Свойство box-reflect используется для создания отражения изображения.
Значение свойства box-reflect может быть: below , above , left или right .
Поддержка браузерами
Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.
Цифры, за которыми следует -webkit-, указывают первую версию, которая работала с префиксом.
| Свойство | |||||
|---|---|---|---|---|---|
| box-reflect | 4.0 -webkit- | 79.0 -webkit- | Не поддерживается | 4.0 -webkit- | 15.0 -webkit- |
Примеры
Пример
Здесь нам нужно отражение под изображением:
Пример
Здесь мы хотим, чтобы отражение было справа от изображения:
CSS Смещение отражения
Чтобы указать зазор между изображением и отражением, добавьте размер зазора в свойство box-reflect .
Пример
Здесь нам нужно отражение под изображением со смещением 20 пикселей:
CSS Отражение с градиентом
Мы также можем создать эффект затухания на отражении.
Пример
Создайте эффект затемнения на отражении:
ПАЛИТРА ЦВЕТОВ
ПРИСОЕДИНЯЙТЕСЬ!
Получите ваш
Сертификат сегодня!
Связь с админом
Если вы хотите сообщить об ошибке, а также внести предложение о работе сайта, добавить объявление или рекламу на сайт, не стесняйтесь отправить админу электронное письмо на email:
Топ Учебники
Топ Справочники
Топ Примеры
Веб Сертификаты
Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
Также доступна версия сайта W3Schools на украинском языке.
Copyright 1999-2021 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.
Flip / mirror an image horizontally + vertically with css
Im trying to flip an image to display it 4 ways : original (no changes), flipped horizontally, flipped vertically, flipped horizontally + verticly.
To do this Im doing the below, it works fine apart from the flip horizontally + vertically, any idea why this wouldnt be working ?
Ive made a JS fiddle of the issue here : https://jsfiddle.net/7vg2tn83/
4 Answers 4
It wasn’t working before because you were overriding the transform in your css. So instead of doing both, it just did the last one. Sort of like if you did background-color twice, it would override the first one.
To perform a reflection you can use, the transform CSS property along with the rotate() CSS function in this format:
The function rotateX() will rotate an element along the x-axis and the function rotateY() will rotate an element along the y-axis. I find my approach intuitive in that one can visualize the rotation mentally. In your example, the solution using my approach would be:
The JS fiddle to demonstrate the solution is https://jsfiddle.net/n20196us/1/
You may do a transform: rotate(180deg); for the horizontal+vertical flip.
Как отразить картинку по вертикали и горизонтали CSS
Чтобы отразить картинку по вертикали или горизонтали с помощью CSS можно использовать свойство transform с функцией scale(), отрицательное значение этой функции (-1) позволяет сделать отражение. Написать код CSS можно так:
- transform: scale(-1, 1) — отражение по горизонтали;
- transform: scale(1, -1) — отражение по вертикали;
- transform: scale(-1, -1) (или просто scale(-1)) — одновременное отражение по горизонтали и вертикали.
Вместо scale() можно использовать отдельные функции scaleX() и scaleY(), они отвечают за масштабирование по соответствующим координатам:
- transform: scaleX(-1) — отражение по горизонтали;
- transform: scaleY(-1) — отражение по вертикали;
- transform: scaleX(-1) scaleY(-1) — одновременное отражение по горизонтали и вертикали.
На данном примере показано как отразить картинку по горизонтали используя transform: scaleX.
Reflection! Cool Effects with -webkit-box-reflect
-webkit-box-reflect is a very interesting property that gives CSS the ability to act like a mirror, reflecting what our elements were originally drawn on.
Today, although it is still a Non-standard syntax, the compatibility has been greatly improved, and with it we can achieve very many interesting effects.
As of 2022–08–07, its compatibility has reached 93.48%, take a look at CANIUSE -webkit-box-reflect :
What is -webkit-box-reflect
The syntax of -webkit-box-reflect is very simple, the most basic usage looks like this:
Among them, below can be below | above | left | right means bottom, top, left, right, that is, there are 4 directions to choose from.
Suppose we have the following image:
Add -webkit-box-reflect: right to achieve just the right side of the reflection:
The effect is as follows, generating a mirrored element to the right of an element:
Set the reflection distance
After the direction, you can also follow a specific numerical value to indicate the distance between the reflection and the original element.
After adding 10px , the reflection will be spaced 10px apart from the original element:
Set the gradient of the reflection
There is also a very important function, that is, behind the orientation, you can also set a gradient value. Using this gradient value, you can achieve a blurring effect of the reflection, which is very important.
Look at the effect, after the virtual and real changes, it is more like a reflection.
In fact, the gradient here is to add a MASK attribute to the reflected image. The transparent part will make the image transparent, while the solid color part will keep the original image.
Use -webkit-box-reflect to achieve some interesting animations
After mastering the basic syntax, we can use it to achieve some interesting dynamic effects, which are briefly listed below.
I’ve found this property to be especially useful in some dark-style pages. It can make a lot of dynamic effects look much taller. (personal aesthetic)
Use -webkit-box-reflect in the Button Effects
With some buttons with dynamic border animation, it can create a very sci-fi effect:
If you are interested, you can poke the source code to understand:
Use -webkit-box-reflect in the Text Effects
In a darker setting, the use of -webkit-box-reflect makes the whole effect much more advanced.
Use -webkit-box-reflect in 3D Effects
Next, we can even apply -webkit-box-reflect to the 3D effect to create a completely different viewing experience.
Let’s add a reflection effect to a 3D photo wall:
Use -webkit-box-reflect to create artistic patterns
Interesting CSS art, here it is again.
In this article by Mr. Yuan Chuan — Chinese Window Lattice And CSS , he introduced the idea of -webkit-box-reflect generating paper-cut art.
Since the reflection can be generated by -webkit-box-reflect , then we use it for constant nesting, one layer nested in another, then only one basic element needs to be generated, and we can use the reflection to produce a variety of different effects.
If we have the following HTML:
We just need to implement a graph for .g-wrap4 , for example:
Then there are 4 layers of nesting, first adding a layer of reflection to wrap4, via -webkit-box-reflect.
Continue nesting and add a layer of reflection to the wrap3:
Let’s go ahead and do some of the same things for wrap2:
Finally, add -webkit-box-reflect to grap1.
We can get a graphic obtained by 4 layers of reflection:
In this way, through different basic graphics, we can use our imagination to generate a variety of paper-cut symmetrical graphics:
The complete code can be found here:
Finally
More wonderful CSS technical articles are summarized in my Github — iCSS.
And maybe you will love my CodePen, which has a large number of amazing CSS effects.